OpenGL ES 2.0
In this guide you’ll learn how to apply a shader program within flixel. In order to create a shader program you'll need to learn a new language. However this guide won’t cover all the detail about OpenGL ES 2.0 and how to write OpenGL Shader Language. There are many resources that cover these points which you can find at the bottom of this page.
To create a shader program you need two types of shaders: vertex and fragment shader. A shader is a program designed to run on some stage of a graphics processor. Both shaders are written in OpenGL Shading Language. For more information about the shaders, read this: https://github.com/mattdesl/lwjgl-basics/wiki/Shaders.
By default flixel uses GLES10. You need to turn GLES20 on for the platform you want to run.
Desktop
public static void main(String[] args)
{
// The last parameter is to set OpenGL ES 2.0 support
new FlxDesktopApplication(new YourGame(), 320, 240, true);
}Android
@Override
protected void onCreate(Bundle savedInstanceState)
{
cfg.useGL20 = true;
super.onCreate(savedInstanceState);
}##Example Vertex shader
// incoming Position attribute from our SpriteBatch
attribute vec4 a_position;
// the transformation matrix of our SpriteBatch
uniform mat4 u_projTrans;
void main()
{
// transform our 2D screen space position into 3D world space
gl_Position = u_projTrans * a_position;
}Source: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson1#the-shaders
##Example Fragment shader
// GL ES specific stuff
#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif
void main()
{
// final color: return opaque red
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}Source: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson1#the-shaders
##ShaderProgram
If you got vertex and fragment shaders you can then compile it into a ShaderProgram. This can be done via the class FlxG.
final String VERTEX = "path/vertex.glsl";
final String FRAGMENT = "path/fragment.glsl";
...
// Add callback restore the uniforms when the context is lost.
FlxShaderProgram shader = FlxG.loadShader("name", VERTEX, FRAGMENT, new IFlxShaderProgram()
{
@Override
public void loadShaderSettings(ShaderProgram shader)
{
shader.begin();
// Set the attributes, uniforms and vertex attributes here.
shader.end();
}
});As you can see, the last parameter requires a callback. When the context is lost the callback will be fired FlxGame.resume(). This applies only to mobile devices.
The ShaderProgram is now done and it can set to classes that inherit FlxSprite.
FlxSprite sprite = new FlxSprite(0, 0, ImgSprite);
sprite.shader = shader;The above ShaderProgram will make the sprite completely red. If you want to control the texture and shader bindings for an individual sprite during the rendering, you can override FlxSprite.renderShader().
Apply ShaderProgram to SpriteBatch.
FlxG.batch.setShader(shader).Every object that renders will use the shader that is set in the SpriteBatch. You can ignore the shader via FlxSprite.ignoreShaderBatch = false.
Dispose
A ShaderProgram must be disposed when it is no longer needed. This can be done via FlxG:
FlxG.disposeShader(name) |
Free memory by disposing a ShaderProgram and removing it from the cache if there are no dependencies. |
FlxG.destroyShaders() |
Destroys all shaders. |
Optimization
Set ShaderProgram.pedantic to false. Pedantic indicates whether attributes & uniforms must be present at all times.
Tutorials
The tutorials from mattdesl are ported to flixel. You can follow his guide and compare the code with flixel's.
Examples
Sources