TypeScript debugging in Visual Studio with IE, Chrome and Firefox using Source Maps

27. May 2014

 

So I’ve been looking at creating games using Phaser with TypeScript and I’ve run into my first few annoyances.  The first of which is certainly debugging.  At first glance debugging looks wonderful then I realized my mistake.  In the previous post I said I had to add the generated JS file to the project for a breakpoint to be hit and suddenly I understand why.

 

You can’t debug TypeScript code in Chrome or Firefox.

 

Ugh.

 

If you set a breakpoint in Visual Studio in a TypeScript file:

image

 

Then run your application using Internet Explorer as the target:

image

 

And…

image

 

Now switch to Chrome or Firefox and your breakpoint will never be hit.

 

 

Well that kinda sucks.  At the end of the day it’s not a deal breaker, Internet Explorer is getting better and with Windows Tablets and Phones, should probably be a device target for you, so using Internet Explorer as your debug platform shouldn’t be a huge deal, especially if you are using Visual Studio as your development device.

 

 

Debugging TypeScript in Firefox or Chrome

 

Of course both Firefox and Chrome have built in debuggers so you can easily debug the generated JavaScript.  However, if you want to develop in the language your programmed ( be it TypeScript, Dart or Coffeescript ) you need another option…

 

Source Maps.

 

All major browsers support source maps now, but may require you to jump through a a couple hoops.  A source map is basically what it says, a map from one language to another, so the debugger can run the JavaScript code but show you the line that actually generated it.

 

First we need to tell Visual Studio to generate a source map for our TypeScript project.  Right click your Project file in Solution Explorer and select Properties.

image

 

Select TypeScript Build and in the Debugging section check Generate Source Maps.

image

 

Now build your project and the js.map file should be generated.

 

Source map with Chrome and TypeScript

 

Now let’s take a look at the process in Chrome.  Run the project in Chrome from Visual Studio.  In Chrome we now need to enable source maps.

Press F12 to bring up the developer tools if not already open.

Select the gear icon.

image

 

In the resulting window make sure Enable JavaScript source maps.

image

 

Now you will see your ts files are available in the sources tree.  Notice how I set a breakpoint in the TypeScript source ( line 12 )?

image

 

Now refresh in Chrome:

image

 

The corresponding line in the generated JavaScript will be triggered when the breakpoint is hit.

 

Not perfect but definitely better.

 

Source map with Firefox and TypeScript

 

From Visual Studio run in Firefox.

Load the Debugger ( CTRL + SHIFT + S or Tools –> Web Developer –> Debugger ).

Click the gear icon and now select Show Original Sources

image

 

Now Firefox will show your TS source ( and no JS files unlike Chrome, to see them turn Show Original Sources off ).  As you can see you can now set a breakpoint in the TypeScript source:

image

 

Unlike Chrome however the debugger also works with the TypeScript sources:

image

 

 

 

Summary and another gotcha!

 

If you are working in Visual Studio 2013 the VS debugger works flawlessly with Internet Explorer.

If you want to work in another browser with TypeScript use Source Maps if you don’t want to work with the generated JavaScript.  In terms of browsers, Firefox supports source maps much better than Chrome does.

 

Now another gotcha that took me a bit of time to stumble to the solution of.  When you create a source map its actually added at the bottom of the generated JavaScript file (app.js in this case), like so:

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=C:/temp/Phaser/TitleScreen/app.js.map

 

Here is the gotcha, you absolutely cannot use that pathing in Chrome nor Firefox, you simply wont get a source map in either browser.  Instead edit it to use relative paths like:

 

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=app.js.map

And you are good to go.

Programming




Adventures in Phaser with TypeScript–Why it’s Hello World of course

23. May 2014

 

 

I believe there is an old law or charter that requires all programming adventures to start off with a Hello World application, and who am I to break the law ( or charter ) ?

 

Of course before you get started, you have to choose your tools.  One of the cool things about working in HTML5 is you can simply pick your favorite text editor ( such as Sublime Text or Notepad++ ) and just start typing.  TypeScript adds a small layer of complexity over top but not too much.  I’ll cover TypeScript in a second, in the meanwhile back to the tools.  Personally I like working in an IDE like environment, integrating as much of the development cycle ( build-compile-run-debug, although not all are relevant to HTML5 ) in a single location.  For TypeScript development there are two clear leaders to chose from, both of which I have access to licenses for.  Visual Studio and WebStorm.  You can use the Express versions of Visual Studio to do TypeScript development if you don’t have a full license, while Webstorm is available with a 30 day license ( and is well worth the 50$! ).

 

Personally I chose Visual Studio 2013 for a couple reasons.  First, I’ve been doing lots of Java development lately, so I miss the familiar comforts of Visual Studio, which in my opinion is still the best IDE on the market.  Second, Microsoft developed TypeScript, so you have to imagine the tooling support is pretty good.  And it is.  Of course you’ve got solid code completion, error checking and syntax colouring:

image

 

Perhaps more importantly, debugging support works as well.  You can set breakpoints, inspect values and step line by line:

image

 

However, there is a problem I encountered here in Visual Studio 2013.  It simply wouldn’t hit any breakpoints I set in code.  Granted, this is a bit of a big problem, no?  Anyways my solution was pretty simple… add the generated JS files to the project and you are good to go:

 

image

 

There is probably a better solution, but this worked for me.  Oh, speaking of Visual Studio 2013 problems, I encountered another one.  When you try to create a new TypeScript project, you may be prompted to install TypeScript for Visual Studio 2013.  However, when you click the link for it, it brings you to the website for TypeScript for Visual Studio 2012!  If you want to do TypeScript development in Visual Studio 2013 you need to download and install Visual Studio 2013 Update 2.  Advanced warning, it’s 3.6GB.  Of course, if you’ve been using Visual Studio recently, or just downloaded it, you probably already have Update 2 installed so it wont impact you.  Me, I was out and used my mobile connection to download the update… ouch!

 

Otherwise for getting started with Phaser in Visual Studio using TypeScript this tutorial is a great place to start.  A few things have changed ( like the above mentioned Get TypeScript link process no longer working ) and a few of the generated names are different ( default.htm is now index.html ), but otherwise it will get you up and running in a few minutes.  Basically you just download or clone Phaser from Git.  Truth is though you only need to add a few files to your project all available in this folder.  The files of importance are phaser.js and phaser.d.ts.  The first file is Phaser itself ( the .min version is optimized for size for when you deploy, but use the full slower to load version for development ) and the .d.ts are the TypeScript definitions.

 

 

Why TypeScript

 

You may be asking what exactly TypeScript is?

It’s a Microsoft created language designed to make JavaScript development easier.  One thing to be aware of upfront, TypeScript IS JavaScript, in that 100% of JavaScript is valid TypeScript.  This makes TypeScript a superset of JavaScript.  You could take any .js file, rename it .ts and it will run just fine.  At the end of the day, all TypeScript is compiled down to ordinary JavaScript, remarkably readable JavaScript to boot.

 

The “Super” part of superset is what makes TypeScript so useful.  Basically it adds a number of constructs on top of the language that make dealing with some of JavaScript’s worst warts easier.  More than anything, TypeScript allows you to deal with increasingly complex applications, something JavaScript really doesn’t make easy.  That’s all nice and good to say but you may be asking How?  Good question!

 

First of all TypeScript adds a Type system on top of JavaScript… thus the name.  JavaScript has very mutable types… if you pass a string where it expects a number, it happily converts as best it can, even if that isn’t what you want.  With TypeScript, if you define a type for a variable then use it wrong it will catch it at compile time.  This alone should cut down on hoards of logic errors.  Of course for those that want JavaScript style ducktyping “any” exists.

 

Second, TypeScript adds classes, something that is coming in the future for JavaScript.  This allows data hiding ( marking members as private ) as well as built in constructor support.  Data hiding is something JavaScript desperately needs, allowing multiple programmers to write code that doesn’t stomp all over each other.  TypeScript also adds the interface, which is a class without implementation, or somewhat easier to grok as a “contract”.  TypeScript also enables generics.

 

Third and somewhat related to the second, it also adds Modules, something modern day JavaScript hacks in using closures.  If you have used C++, Java or C#, think namespaces.  There is also functionality in there to make the JavaScript experience more consistent such as always prefering === for comparisions ( 1 == “1” isnt true in Typescript, in fact it’s an error ), consistent this handling, etc.

 

It’s Microsoft, shouldn’t I be afraid?

When it comes to programming languages this is a perfectly legit concern when it comes to Microsoft.  Many of us remember the “embrace and extend” approach of J#, which was a Microsoft supplied Java implementation that only worked on Windows machines.  JScript.NET and Managed C++ can certainly be looked at as lesser evils created by Microsoft.

 

In the case of TypeScript though, this isn’t really valid for a couple reasons.

  • it’s open source.  Real open source too not some fake opensource lite ( Its Apache 2.0 by the way ).  So if they try to make it MS only people can literally tell them to fork off.
  • there is nothing Microsoft specific in there.
  • at the end of the day, it compiles down to JavaScript.

 

TypeScript is hardly unique, is it?

Nope, there are other languages that work in a very similar manner and work to solve the same problems.  The closest two are CoffeeScript and Google’s Dart.  That said there are tons of other languages that compile into JavaScript such as GWT ( Java to JavaScript ), Haxe, Kotlin ( Kotlin –> JVM –> JavaScript ) and probably a few dozen’s more.  What makes TypeScript most appealing to me is it’s simularity to normal JavaScript ( unlike CoffeeScript ) and it’s not Google ( unlike Dart and GWT )… what can I say, I’ve been burned too many times from Google’s horrific developer support.  Unlike Microsoft, Dart does very much have vendor tie in ( Chome/ChromeOS native Dart support ), something to be very aware of!

 

Ok… set up, tooling and language bits behind us, let’s take a look at a simple Phaser app!

 

First you have your host index.html.  This is the webpage you load in your browser to get things started:

 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

 

Most important lines here are the two <script> tags, bringing in first the Phaser libraries then your generated js code.  ( app.ts will automatically be converted to app.js by Visual Studio when you run if no errors occur ).

 

Now let’s take a look at App.ts:

 

class SimpleGame {

    constructor() {
        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create });
    }

    game: Phaser.Game;

    create() {
        var text = "Hello World!";
        var style = { font: "65px Arial", fill: "#ff0000", align: "center" };
        this.game.add.text(0, 0, text, style);
    }

}

window.onload = () => {
    var game = new SimpleGame();
};

 

And that’s it.  Run it and your selected browser should automatically open and you should see:

image

 

Humble beginnings certainly, but beginnings all the same!

This is about the simplest Phaser application you can make.  The key line is creating game, a new instance of the Phaser.Game class.  The values we are passing in are the width, height, renderer, parent and a collection of functions that can will be called during the programs lifecycle.  The width and height are self explanatory.  The renderer tells Phaser how to render your game, using Canvas, WebGL or Headless ( for server side apps that don’t render ).  The value Phaser.AUTO let’s Phaser decide.  ‘content’ is the name of the HTML element to render to, you may notice back in the HTML file our DIV name is content, this is what connects Phaser to your HTML. The final value { create: this.create } is a name value pair saying for the “create” function use this.create.   There are a number of States that Phaser can be in, create, preload, render, update.  In this case we are simply defining the create state, so when Phaser enters a create state, our game’s create function will be called.

 

In the create method we simply create a text object and add it to our game using this.game.add.text().  The style value is in traditional CSS styling format.  The Text value is obviously the text to display.  Finally we wire up window.onload() to create an instance of our game starting the whole process off.  If you aren’t used to JavaScript programming window is a top level global object provided by the browser, onload is the method called predictably enough when your webpage loads.

 

Essentially the work flow goes:

  • user opens page in web browser
  • Phaser.js script is run and Phaser is loaded.
  • Your app ( app.js ) code is loaded
  • Your app registers a create method and creates a game instance then registers an onload handler.
  • webpage finishes loading, your pages onload is called creating an instance of your game.
  • Phaser enters a create state and your create() function is called.

 

Normally your application would continue to cycle through the various states ( update/render mostly ) and this is where your game would “run”.  We will look at this in more detail soon.

 

All told I have to say my initial impressions of Phaser are incredibly good.  There are hundreds of examples, the documentation is ample and well written.  Obviously it’s too early to comment on performance, design or other technical aspects yet.

 

Programming , , ,




Phaser 2.0.5 HTML5 gaming library released… and speaking of which

21. May 2014

 

Yesterday saw the release of 2.0.5 of the Phaser game library.  Phaser is one of those libraries I am hearing about more and more recently.  It’s a JavaScript/Typescript game library featuring most of the things you would expect in a modern game engine, including:

  • WebGL and Canvas ( Pixi.js ) renderers
  • Physics
  • Sprites
  • Animation
  • Grouping
  • Input
  • Sound
  • Tilemaps
  • Caching
  • Plugins

 

Release 2.0.5 adds:


Updates
  • TypeScript definitions fixes and updates (thanks @luispedrofonseca @clark-stevenson @Anahkiasen @adamholdenyall @luispedrofonseca @WillHuxtable)
  • Input.getPointerFromIdentifier docs update to reflect where the identifier comes from. Pointer properties now set to give it fixed defaults (thanks @JirkaDellOro, #793)
  • Pointer.pointerId added which is set by the DOM event (if present in the browser). Note that browsers can and do recycle pointer IDs.
  • Pointer.type and Pointer.exists properties added.
  • QuadTree.retrieve can now accept either a Sprite with a physics body or a Phaser.Rectangle as its parameter.
  • PluginManager.add now accepts additional parameters and if given a function it will pass them all to the Plugin constructor.
  • Tilemap.getTile has a new nonNull parameter. If true it won't return null for empty tiles, but will return the actual Tile in that location.
  • Math.interpolateAngles and Math.nearestAngleBetween have been removed for the time being. They threw run-time errors previously.
  • PIXI.InteractionManager is no longer over-written if the object already exists (thanks @georgiee, #818)
  • Key.justPressed and justReleased incorrectly set the delay value to 2500ms. Now defaults to 50ms (thanks @draklaw, fix #797)
  • Stage.backgroundColor can now accept short-code hex values: #222, #334, etc.
  • Pointer.withinGame is now accurate based on game scale and updated as the Pointer moves.
  • Stage.bounds is now updated if the game canvas offset changes position. Note that it contains the un-scaled game dimensions.
 
New Features
  • New force parameter added to Group.set, setAll, setAllChildren, setProperty which controls if a property is created even if it doesn't exist.
  • Group.hasProperty will check a child for the given property and return true if it exists, otherwise false.
  • Phaser.Tween.from allows you to set tween properties that will end up where the current object is (thanks @codevinsky, #792)
  • Input.getPointerFromId will return a pointer with a matching pointerId value, if any. pointerId is a value set by the browser in the DOM event.
  • ArcadePhysics.getObjectsUnderPointer will return all children from a Group that overlap with the given Pointer.
  • InputManager.minPriorityID lets you set the minimum priority level an object needs to be to be checked by a Pointer. Useful for UI layer stacking.
  • New consts: Phaser.Tilemap.NORTH, SOUTH, EAST and WEST to use with plugins and generally just handy to have.
  • BitmapData.processPixelRGB added undefined check (thanks @muclemente, fix #808)
  • Phaser.Utils.transposeArray will transpose the given array and return it.
  • Phaser.Utils.rotateArray will rotate the given array by 90 or 180 degrees in either direction and return it.
  • BitmapData.rect provides a quick way to draw a Rectangle to a BitmapData.
  • Button.onOverMouseOnly is a boolean that causes onOver events to fire only if the pointer was a mouse (i.e. stops onOver sounds triggering on touch)
  • Tilemap.setCollision has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionBetween has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionByExclusion has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionByIndex has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Graphics.drawTriangles will draw an array of vertices to the Graphics object (thanks @codevinsky, #795)
  • Polygon.area will calculate the area of the Polygon (thanks @codevinsky, #795)
  • The Tiled JSON parser will now include Tiled polygons, ellipse and rectangle geometry objects in the resulting map data (thanks @tigermonkey, #791)
  • Input.addMoveCallback allows you to bind as many callbacks as you like to the DOM move events (Input.setMoveCallback is now flagged as deprecated)
  • Input.deleteMoveCallback will remove a previously set movement event callback.
  • Mouse will now check if it's over the game canvas or not and set Pointer.withinGame accordingly.
  • Mouse.mouseOutCallback callback added for when the mouse is no longer over the game canvas.
  • Mouse.stopOnGameOut boolean controls if Pointer.stop will be called if the mouse leaves the game canvas (defaults to false)
  • Tilemap.searchTileIndex allows you to search for the first tile matching the given index, with optional skip and reverse parameters.
  • Tilemap.layer is a getter/setter to the current layer object (which can be changed with Tilemap.setLayer)
  • Cache.checkKey added - allows you to pass in a Cache type and a key and return a boolean.
  • Cache.checkCanvasKey(key) - Check if a Canvas key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTextureKey(key) - Check if a Texture key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkSoundKey(key) - Check if a Sound key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTextKey(key) - Check if a Text key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkPhysicsKey(key) - Check if a Physics key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTilemapKey(key) - Check if a Tilemap key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBinaryKey(key) - Check if a Binary key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBitmapDataKey(key) - Check if a BitmapData key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBitmapFontKey(key) - Check if a BitmapFont key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkJSONKey(key) - Check if a JSON key exists in the cache (thanks to @delta11 for the proposal)
  • New movement data added for a Pointer Locked mouse (Pointer.movementX/Y) (thanks @woutercommandeur, #831)
  • ScaleManager.bounds is a Rectangle object that holds the exact size of the game canvas, taking DOM offset and game scale into account.
 
Plugins

The Plugins have now all moved to their own repository

Bug Fixes
  • Line.pointOnLine corrected algorithm (thanks @woutercommandeur, fix #784)
  • Line segment collision fails under certain cicumstances (thanks @woutercommandeur, fix #760)
  • The P2 DistanceConstraint method signature has changed. Updated Phaser so maxForce is now passed as object (fix #788)
  • Moved the this._reversed flag outside of the property loop in Tween (as per tween.js issue 115)
  • Emitter.makeParticles updated to use Array.isArray() check on the key/frame values, so non-string objects can be passed in (thanks @AnderbergE, fix #786)
  • Tilemap.createFromObjects will now force the creation of the property again even if it doesn't exist (regression fix from 2.0.4)
  • Phaser.Line.intersectsPoints fixed by properly checking the boundaries (thanks @woutercommandeur, fix #790)
  • Group.set and setAll were changed in 2.0.4 to not create the property unless it existed. This broke backwards compatibility, so has been fixed.
  • Sound.play now returns the Sound object (thanks @AnderbergE, fix #802)
  • Device Silk UA test updated to avoid Safari conflict (thanks @jflowers45, fix #810)
  • Sound.stop on Samsung S4 would randomly throw a DOM error. Wrapped the audio stop in a try/catch (thanks FSDaniel)
  • RandomDataGenerator.integerInRange would return a non-integer value if you passed in a float.
  • Timer class updated so that code-resumed pauses don't mess up the internal _pausedTotal value (thanks @joelrobichaud, fix #814)
  • Timer class when paused by code after a game-level pause wouldn't set the codepaused flag (thanks @joelrobichaud, fix #814)
  • Stage.backgroundColor now properly accepts hex #RRGGBB and color values 0xRRGGBB again (fix #785)
  • Color.getRGB would return incorrect color components if a color value without alpha was given, now works with both 0xRRGGBB and 0xAARRGGBB.
  • Color.getWebRGB now works regardless if you give an 0xRRGGBB or 0xAARRGGBB color value.
  • If an object was drag enabled with bringToTop, the onDragStop event wouldn't fire until the mouse was next moved (thanks @alpera, fix #813)
  • RetroFont.text would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
  • RenderTexture.resize would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
  • Group.hasProperty fixed to not use hasOwnProperty, but a series of in checks (thanks @mgiuffrida for the idea, #829)
  • Tilemap.removeTile sets tiles to null but should set to index of -1 (thanks @draklaw, fix #835)

 

Plugins being moved to their own respository should make contributing to Phaser easier.  The repository is available here.

 

 

Personally I’ve been meaning to look closer at Typescript for a quite a while now and I’ve decided to do it with Phaser.  Of course I am going to document the process as I go, so if you are interested in Phaser or Typescript, stay tuned.  It’s not going to be a proper tutorial; as I have zero experience as of right now.  It should however still be useful to someone looking to get started with Phaser.

News, Programming ,




OpenGL Shader Programming Resources Round-up

16. May 2014

 

The following is a collection of modern shader programming resources.  I intend to improve my knowledge of shader programming and intended to gather all the current resources I could access together in one place.  This resource (mostly) ignores HLSL ( Direct3D ) and custom implementations, like Unity3D.

Please note, this resource is only about shader programming only.  There exist tons of resources that are about OpenGL programming, which as a subset includes GLSL.  I covered many of these resources in my previous Modern OpenGL Resources round-up.  So if you are looking for tutorials, samples and books on OpenGL programming, you should start there.

 

Sites

 

Kick.js Shader Editor

Online shader editor tool with realtime preview and samples as well as error console.

 

Shadertoy

An absolute must visit.  Think of it as the gitbhub for shaders.  Create, share and view hundreds of others shaders.  The site is awesome, but a warning.  It will absolutely kick the crap out of your browser, as the home page, somewhat dumbly, opens dozens of shaders at once. 

 

Shdr

Online GL shader editor/validator/preview similar to Kick.js.  Open sourced MIT license.

 

GLSL Sandbox

Another site for discovering and sharing shaders, including a simple editor.

 

For tutorials links see the Modern OpenGL Resources round-up.

 

Tools

 

nVidia Nsight / CUDA Toolkit

Among other functionality, Nsight provides a GLSL/HLSL shader editor and enables shader debugging.  For Mac/Linux it’s available for Eclipse, but on Windows it’s a Visual Studio plugin.  Unfortunately, Visual Studio 2013 isn’t supported yet and Express versions do not support plugins, so I have not tried it yet.

 

AMD GPU PerfStudio

AMD’s GPU toolset.  Includes a shader editor and debugger, but sadly it’s currently HLSL only.  Worse, its DX11 only, meaning the converter probably wont work.

 

AMD GPU ShaderAnalyzer

Tool for analysing shader performance, doth GLSL and HLSL.

 

GLSL Hacker

Cross platform tool for 3D prototyping.  Load a 3D object and see your shader in action.

 

HLSL2GLSL

Convert DirectX9 HLSL shaders to GLSL.  Was originally released by AMD, then forked by someone on the Unity team.  Useful if trying to support both renderers, or using a tool that exports only HLSL shaders.  It’s open source and apparently the source is pretty awful.

 

nVidia FX Composer

nVidia’s shader IDE.  Abandoned, doesn’t directly support GLSL. :(

 

Rendermonkey

AMD/ATI’s shader IDE.  Also abandoned, a long time ago. :(

 

ShaderDesigner

GLSL IDE.  It’s old but seemingly was updated last year.  Didn’t run due to need to install component that required a license server.  I hate installing license servers to my machine.

 

Apple OpenGL Shader Builder

Apple include a development environment for developing and testing GL shaders.  It is however OS/X only and you need to log in to their developer portal to download.  The Guide is available without logging in.

 

qshaderedit

An open source, cross platform shader editor inspired by Apple’s Shader Builder.

 

Shazzam Shader Editor

First off, this exports HLSL to GLSL ( see HLSL2GLSL above ) and is aimed at XAML/Silverlight developers.  It does however include a shader editor and the ability to preview the results.  Last updated July 14th, 2012.

 

Glman

A simple tool for learning shader programming.  Includes the course work the tool is meant to supplement.  Last updated Dec 7, 2011.

 

GLShaders for Eclipse

Eclipse plugin for developing shaders ( vertex and pixel ) inside the Eclipse IDE.  Provides syntax colouring and error/warnings.

 

Books ( Shader specific )

 

GLSL Essentials

Dec 2013, Packt

SafariLink

116 Pages

 

OpenGL 4 Shading Language Cookbook 2nd Edition

Dec 2013, Packt

SafariLink

394 Pages

For some reason, Safari version is Second Edition, while on Amazon I can only find the first edition published in 2011.

 

Graphics Shaders: Theory and Practice, 2nd Edition

Nov 2011, CRC Press

SafariLink

518 Pages

 

OpenGL Shading Language, 3rd Edition

July 2009, Addison-Wesley

SafariLink

792 Pages

Once again, the above are simply books *dedicated* to shader programming and GLSL in specific.  Any modern OpenGL text will have a great deal of content on shader programming.  In fact, if it doesn’t you probably shouldn’t touch it, as it is heavily out of date.

Programming




Trying to run our C++ tutorial on a new Visual Studio version and getting a MSVCR100D.dll missing error

14. May 2014

 

I’ve had a few users run into this error when trying to run the GameFromScratch C++ Game Dev tutorial:

 

image

 

The program can’t start because MSVCR100D.dll is missing from your computer.  Try reinstalling the program to fix this problem.

 

Fortunately this can be pretty easily fixed, simply download and install the Visual Studio 2010 runtime redistributable.  You can download it here.

 

However…

 

The binaries I include with the SFML tutorial of SFML 1.6 are compiled for Visual Studio 2010 and aren’t compatible with Visual Studio 2012/2013.  Normally this is just a matter of recompiling SFML 1.6 in the newest version of Visual Studio, then linking against those Lib/DLL files.  However this process certainly isn't straight forward as the SFML 1.6 code base was actually targeting for Visual Studio 2008 and amazingly enough, depending on some external libraries compiled for Visual C++ 2005!

 

To be honest, if you are running through this tutorial series, by far the easiest solution is to install Visual C++ 2010 Express.  It can be installed side by side with newer versions.

 

If there is enough demand, I can try to make 2013 compatible binaries that you can include with your project.

Programming ,