Category Archives: HTML5

Experiment with Ash Framework

Posted on by
3

Months ago, I was experimenting with HTML5 game development. Since it’s a fresh start, I thought, why not start with a better game architecture? So I made an experiment with Backbone.js, one of the famous JavaScript frameworks, but I don’t think MVC/MV* would fit for game development. That’s when I found  entity-component based framework.

There are many famous game engines which already use this kind of framework like Unity3D or XNA. I found some on the list of JavaScript game engines but I was surprised when I found even more for ActionScript 3:

I tried to learn more about this and found a very good article by Richard Lord. He wrote a good explanation on what entity-component framework is and why it ‘s better for game development. He also developed Ash framework for ActionScript 3. It includes a simple Asteroid game, but once I’ve read the source code, I was immediately sold to this framework.

Ash framework is simple and minimalist. It only includes the basic components which means you can combine it with your favorite 2D/3D, game or physics engines, and can be easily ported to JavaScript or Haxe (someone have already done this. See HashDS and Ash-Haxe).

So I made an experiment, extending the Asteroid game so it can support Native Flash, Starling, and Away3D. All renderers in one game!

Checkout the demo at http://abiyasa.com/lab/away3d/ashteroids/

Using Ash framework, it is easy to switch between renderers. The game logic and other components stay the same; the only difference is which renderer system is being used. Check out the GitHub page for more info about this ;-)

It’s funny how I started with HTML5 game development but end up with a better ActionScript framework :-)

Bonus: Some other articles on Entity-component framework:

WebGL is not ready yet

Posted on by
5

I’ve been exploring WebGL for game development. So far, there are many things that I like. I love the fact that you don’t have to compile anything. Edit your source code, open it on a browser, and click refresh! You can even debug your code directly on the browser (I <3 Chrome)!

If you know Away3D, you might going to like Three.js. Three.js to WebGL is just like Away3D to Stage3D: easy to use, readable example codes, and has some high level functions for animations, particles, and models loading.

Everything sounds perfect, right? Unfortunately, when it comes to mobile and tablet support, WebGL is a big disappointment.

There is NO support for WebGL on mobile browser and tablet. If you check on caniuse.com, there is no WebGL on Android Browser, Chrome for Android, Firefox for mobile, nor the iOS Safari. Not even for the latest versions :|

I’ve tried FireFox Beta & Dolphin Beta for Android, both claim to have WebGL support. Firefox displayed nothing while Dolphin only managed to show rotating globe with less than 1 frame per seconds. FYI, I tested this using my demo on my Galaxy S with Android 2.3.

Same problem with HTML5 Canvas. Although it is has better support than WebGL, the performance suffers a lot on mobile/tablet devices. I played some HTML5 games and sometimes the framerate drops to 5 fps. It could be the hardware or browser problem since the games run smoothly on iPhone4S/iPad3, or maybe it’s just the common problem of HTML5 games?

Sometimes I wonder, what’s the point of having your game in WebGL if it’s only available for desktop browser. You could’ve done it using Stage3D. Even better, with the help of Adobe AIR, you can compile the same source code and have your game running on mobile and tablet, either it’s Android or iOS.

Don’t get me wrong, I don’t hate HTML5. I do believe HTML5 and WebGL could be the future of web gaming. It’s just that it’s too much hyped but not ready for the present.

Is it useless to learn HTML5? Definitlely not! I can say that learning JavaScript makes me a better ActionScript programmer. How? I’ll write more detailed post about this one ;-)

Stay tuned!

Playing with WebGL & Three.js

Posted on by
Reply

I’ve been playing around with JavaScript lately: trying BackboneJS, developing a small project popup help, and reading good articles about ‘modern’ way to use JavaScript.

I still think ActionScript is better but there is one thing that I love most from JavaScript:

No compiling is needed!

I really really love this. You type your code (using Adobe Brackets or Notepad++), refresh your browser, and you see the result. That’s it :-) This allows faster workflow, you can easily try this and that and see the result immediately. With cool debugging tools from Google Chrome or Firebug on Firefox, you can check if there’s something wrong with your code on the browser.

Anyway, I’m currently trying Three.js for WebGL and so far I like it. The setup is easy, just like Away3D. Totally recommended if you’re familiar with Away3D or other 3D engine. Three.js also includes some python scripts for converting OBJ models into its on JSON-based model.

You can click the image below for my Milk Carton Boy model in WebGL using Three.js. Unfortunately, it only works if your browser support WebGL.

The source code is available on GitHub ;-)

Re-learning Javascript

Posted on by
Reply

Lately, I’ve been re-learning Javascript.

Back then in 2004, I used to use Javascript for doing some DHTML stuff (popups, DOM manipulation, …). Nowadays, people start using JavaScript in more structure way to avoid spaghetti code. So I learn how to use some MVC frameworks (like backbone.js or ember.js) and also make myself familiar with JQuery.

Here are some wip learning projects on my GitHub:

    • backbone-cellar: Forked from Coenraet’s Backbone tutorial. I implement Node.JS for the backend support.
    • Alaycator, a simple bookmarklet for converting any website into alay, some kind of Indonesian leetspeak which is popular among teenies :-D
    • todotodo-bootstrap: A simple todo list webapp using Backbone, Require.JS, and Twitter Bootstrap for the UI. Supports mobile and desktop, and stores the data on local database. Contains simple Node.JS script for testing on webserver. I plan to make the JQuery Mobile version of this, stay tuned!

I still think that ActionScript, as a language, is still much better than JavaScript. But the thing is, ever since HTML5 got its hype, JavaScript  has gained LOTS of momentum. People get really excited about it and build amazing things using JavaScript, even on server side.

There are lots of open source projects; people trying to contribute for making better tools or libraries, and all of these grow so fast. Even some Adobe Flex evangelists start promoting JavaScript and HTML5.

At certain point, unless Adobe do something, JavaScript will catchup and will be able to do anything that Flash can do. Hey, maybe that’s not a bad thing ;-)

I believe Flash will not be dead soon and will focus more on what its best: High performance and rich multimedia web/mobile app, including games. I’m not saying that all of these things cannot be done by JavaScript but right now, I still think Flash performance is still the best.

If you want to learn JavaScript the ‘modern’ way, here are some suggestions:

  • Douglas Crockford’s JavaScript: The Good Parts. This is a must read! I find this book helps me to switch my mindset to JavaScript specific things like object/prototype, function closure, the bad parts, and also tips & tricks to avoid the bad parts which make your code more structured ;-)
  • Addy Osmani’s Essential JavaScript Design Pattern. This book is available for free on his GitHub project. This book give some examples how to build more modular and structured JavaScript development.
  • Addy Osmani’s Backbone Fundamentals. Another free book from Addy Osmani, if you want to develop structured, large, and scalable webapp using Backbone.