OpenGL ES 2.0 support

After a long ride I have merge the GLES20 branch into master. Our nightly build didn’t give a sign of error, so I think it’s good to go. What is GLES20? It stands for OpenGL ES 2.0. That’s right, flixel-gdx supports shader now! I’ve been working about a week for the GLES20 API. I made it simply as possible, but there are things that I can’t prevent like the user needs to learn a new language. This language calls OpenGL Shader Language (GLSL) and you need this in order to create a (program) shader.

Theory and practice

Before I started designing the GLES20 API I read two books, online articles and tutorials from scratch to get familiar with GLES20. I’ve almost read all chapters from both books and only memorized 75% of it. Yep, I’m still a rookie in GLES20.

I’ve no intention to promote the books, but I only want to share my experience of it. The first book that I read is OpenGL ES 2 for Android by Kevin Brothaler. As the title says, it targets the Android platform which uses Java as program language, but you can easily adapt the code to other program languages. It’s a color printed book with a lot of code snippets with syntax highlight. I’ve only read up to chapter 8 of 15, because the rest wasn’t relevant for flixel-gdx (it was about 3D World). The author explains it very clear and the code are done step by step. I’ve used the code to practice the baby steps of GLES20. This book is a good introduction to GLES20.

The second book I read calls OpenGL ES 2.0 Progamming Guide by Munshi, Ginsburg and Shreiner. I can tell this book is harder to read if you didn’t started with a simple introduction. The code snippets are written in C. Fortunately, the book shows more GLSL snippets which I needed for the most. I haven’t tried to run any of the code, because I haven’t installed the software and I can’t read and write C. It didn’t matter, because I went for the theory and the books needs one chapter per subject while the book of Brothaler tells three/four subjects in one chapter. This book tells everything about OpenGL ES, from the beginning of the graphic pipeline to the end. I you want to know OpenGL ES 2.0 to the best, you should try this book. The only thing the book doesn’t cover much of the Shader Language. It’s not the goal of the book, so I need to buy another book to teach my self GLSL.

After the reading it was time to practice from scratch. I used the tutorials from mattdesl. The reason for his tutorials is that he also ported the code to libgdx which I can then port it over to flixel. Practicing went great and the most of his explanation I already know from the books. As one of my teachers once said,’ the process of learning is by repeating it’.

API design and Blend Mode

Ok, practicing went well. It was time to write an API for flixel. During the reading and practicing I already came up with a simple API. Everything needs to be done in FlxSprite, because that’s the display of flixel and everything that displays inherits from it. I started porting the tutorials to flixel-gdx and then I slowly dissembled the code into pieces than can be moved to FlxSprite. Everything works fine except for Lesson 5. This is the only lesson which still doesn’t run in flixel. I’ve no idea what the problem is. In general I haven’t encountered too much problems, everything ran well. I even wanted to try out the Blend Mode. I had found nice shaders, without that I had to learn GLSL to create the shaders. This went pretty well too. We got now 41 blend modes. You can find the howto at wiki. BTW you don’t have to write any GLSL code to do the blending.

Problem, context lost

Everything went great, big smile on my face. Until…I saw the context of the shader was lost when the app minimized (~_~;). Ok, no problem I’ll write a ShaderLoader. This class will reload shaders on resume. But this only solves a part of the problem. The uniforms and attributes that were set once on the shaders won’t be restored. I could extend ShaderProgram and override all setUniform*/setAttribute*/setVertexAttribute and store the arguments in a Map and that Map will be then used on resume. Good solution? Uhh no, absolutely no. There are too many methods I need to override and the arguments are all different. One of my team member said it can be done with multiple Maps. Too much work. I thought for a new solution and eventually found one. It’s not the best or it might look a little ugly on the first sight. What I did is extending ShaderProgram and added a callback in the constructor. This callback will be fired on FlxGame::resume(). Inside the callback you set all your texture and shader bindings. Solved! This is how the code looks like:

Shaders

If you look for nice shaders, then shadertoy.com is the right place for you. The shaders are created by developers over the world. I haven’t tried any of the shaders yet, but I do assume the will work on flixel.

Demo

I’ve updated the demo apk which you can download it from the homepage. The new demos are BlendDemo and GLES20Demo. In BlendDemo you’ll see this image. You can touch the screen for the next blend mode. I’ll add more blend modes to the demos and update the image later this week. It’s a nice way to test each blend mode. The GLES20Demo are the lessons from mattdesl and currently lesson 6 is set. It shows a wall with a light. It gives a nice 3D effect. Try it out. If your phone doesn’t support GLES20, you will get the text “your phone is ancient”. For the BlendMode it will switch over to GLES10 and you’ll have less blend modes to view.

Wiki

Although I’m not a good writer I’ve written the wiki pages for Blend Mode and OpenGL ES 2.0. Read it and add information or fix my errors.

Next

I’m going to take look at post-processing library. It’s a nice library that will do the post processing effect for you. If it doesn’t mess a lot with the internal flixel system I might create a plugin of it. No date has been set to begin with it, perhaps somewhere next year.

I hope you liked my GLES20 journey.

Posted in flixel-gdx, OpenGL ES 2.02 Comments
  • Vlad

    Good work!But why do we need shaders in 2d games?

  • WingEraser

    To create nice effects which can’t be done in GLES10.