HTML5 support

Really it’s done? Yes it is. I worked almost every weekend on this and finally managed to fix (the most) bugs to get it running in the browser. What was the problem? The problem was the no support of reflection in JavaScript. Libgdx wrote a nice API to solve this. While moly was able to run the flixel-gdx animation demo months ago, the Reflection API got changed and things got broken. I haven’t taken a look at it (I was working on something else that time). This time I gave it a try, getting animation demo back into running again. I had to test every demo and for each test more bugs came out. The following demos are on the server:

Note: the demos are compiled for the user agent Safari. You’ll get a warning message if your browser got a different user agent.

mode_html5

All the demos runs at 60 FPS in Chrome and Firefox, although Firefox does have some hiccups. The demos have also been tested on Android Chrome and Firefox browser. It didn’t run well. Like 16-20 fps on TiledMap2 demo. Don’t get high expectations on this.
There is no list which you can select the demos from, because the demos got different resolutions.

Setup UI

This tool doesn’t generate HTML5 project. You need to create a GWT project manually. See here: gwt-project-setup
The GWT setup is not tested. Scream if the wiki got it all wrong.

Reflection and Limitations

If you’re planning to create a HTML5 game, keep in mind of using Reflection and the limitations. You can’t use freetype. It doesn’t run in Internet Explorer 11. Check the wiki for more info.

Broken or Buggy

The controller plugin doesn’t work. I haven’t taken a closer look about the bug. It won’t happen anytime soon that I’ll fix this.
For HTML5 it uses a modified JBox2D. Got some null exceptions on some tests and Continuous Collision Detection is unreliable.

Preloader

The preloader doesn’t look fancy, it’s just a logo and a loading bar. You can create your own preloader by overriding FlxHTML5Application::getPreloaderCallback()
I’ve created the original flixel preloader in Canvas. Now I’ve to figured out how to get this in GWT. It might take a while before I start with this.

In the end, it was a pain in the butt to get all of this working…I hate you GWT!

Posted in flixel-gdx, HTML5Leave a comment

Changes and Ludum Dare 28 results!

It’s been a while since the last post. We made some changes in flixel-gdx. It could affect your project. We ported the patches and fixes from FlixelCommunity. Flixel-gdx is now based on FC 2.56. If you like to discuss about features and code design, then head over to the github issue tracker. We can use all the help. If you help FlixelCommunity, you’ll also help us.

Box2D wrapper got removed from the core. No one would use both the main collision (QuadTree) of flixel and Box2D together in a game. Box2D wrapper got moved to its own repository along with the tests. It also got its own icon.

box2d logo

That having said, now the results of Ludum Dare 28! The theme of this LD is “You Only Get One”. We got two games that are made with flixel-gdx. One of them is created by Syl. The game is called “soulmate”. It’s a platform game where you need to save your soulmate. Jump over spikes and run to the end to finish the game.

soulmate

The second game is “Lost In Transmission” and It is created by Michael Cook. You control a robot which needs to repair Arrays. You got limited move direction which can be recovered when you run into a Node. The game gets harder as you advance, like repairing multiple Arrays. This game ended place 19th.

lostintransmission

Posted in Box2D, flixel, flixel-gdx, Ludum DareLeave a comment

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

Twitter

Updates