Tag: HTML5

Latest Google Chrome changes break HTML5 applications built with GameMaker: Studio

Users who browse this site with Google Chrome will have noticed that the HTML5 demos and games that I have built in GameMaker no longer work in the latest version of Chrome. I became aware of this fairly recently, but until yesterday I had hoped that it was just a problem with the configuration of my primary computer, as the problem did not seem to be evident on my other computer that I do testing with. Unfortunately, after updating that computer to the latest build of Chrome, I found that the problem is more widespread.

This thread on the GMC forums explains what to do if you’re a programmer who has an HTML5 game that needs to be patched in order to fix it with the latest Chrome. I have yet to try this on my own games, but will be experimenting in the near future. Presumably, YoYoGames will be updating the GameMaker: Studio build for HTML5 to rectify the problem in an upcoming release, and once done, re-building the game will also fix the issue.

Radar demo now in HTML5

I got the Radar demo working in HTML5, finally. In order to do it, absent a better debugging methodology, I created a new project and meticulously re-built the demo line by line. I’m still not entirely sure why this works while the first one doesn’t — I still need to look at it more closely.

The resulting project isn’t feature-complete yet, but the only missing feature is color coding for IFF, and isn’t where the problem was. Once I’ve finished adding that feature, I’ll update the source download.

For now, here’s an in browser preview of what the radar demo looks like in action:

HTML5 Game Development With GameMaker published

Today Packt Publishing announced the publication of HTML5 Game Development with GameMaker by Jason Lee Elliott. I was involved with the creation of this book as a technical reviewer, and as such I’m intimately familiar with its contents.

While the book title refers to HTML5 games specifically, most of the content is applicable to any development in GameMaker Studio, regardless of your intended build target.

Some of the highlights include:

  • Numerous examples of the “Finite State Machine” pattern implemented as a system of related Objects
  • Building a Box2D physics-based game
  • Creating a particle system
  • Facebook integration
  • Flurry Analytics integration
  • How to publish your game on the web.

If you purchase through the link below, Amazon will compensate me for the referral.

Packt Publishing announces HTML5 Game Development With GameMaker

Packt Publishing has announced an upcoming new book, HTML5 Game Development With GameMaker, by Jason Elliott, tentative publication date in late April 2013.

I provided technical review/editing of the book, and so I can say that it should be a good book if you’re looking to get into the newer features of GameMaker Studio. While the book focuses primarily on HTML5, almost all of the book is generally applicable regardless of what platform you wish to target.

Highlights include:

  • Facebook integration
  • Pathfinding and Artificial Intelligence
  • State Machine design pattern
  • The new Box2D Physics system
  • Particle effects for any game
  • File I/O and HTML5 local storage.

GameMaker HTML5 – deeper impressions

For Ludum Dare 24, I worked on my project in Game Maker: Studio, and did most of my development work targeting HTMl5. I produced a Windows build as well as an HTML5 build, and have spent a lot of time enhancing the game since the compo deadline.

This has afforded me the opportunity to become much more familiar with GameMaker’s HTML5 shortcomings, so it seems like a good time to follow up on my initial impressions from the January beta. While most of the basic features are solid, there’s still a lot of bugs, unsupported features, and inconsistent implementations in the HTML5 runner. Unfortunately, it adds up to make the HTML5 module a bit lacking for serious game development.

Don’t get me wrong — it’s still very possible to make a decent, playable HTML5 game with GameMaker Studio. Just, if you’re hoping to be able to do absolutely everything in HTML5 as you can in Windows, you’re in for a long wait. While much of the framework runs equivalently, there are a lot of minor differences. And while these are minor details, producing a polished, professional game is all about minor details, and getting them right.

I still think there is a lot of promise for HTML5, but W3C, WHATWG, and the major browser developers have to pull together to solidify the technology standards. YYG can’t do some of the things with the HTML5 runner that they currently do in the Windows runner, without this happening. To their credit, they have been releasing updates rapidly, patching bugs almost weekly.

Unfortunately, this means that HTML5 games built in GameMaker Studio are not going to be as pretty or as polished as Flash can be, at least for the foreseeable future. Of course, Flash has many of its own problems: with the rise of the open HTML5 standards, Flash’s future is in doubt, and it seems to be in decline, so it’s not like it’s a great platform to pick up right now if you’re not already well versed in it. Unfortunately, the usurper isn’t quite ready yet. The W3C recently announced the HTML5 recommendation will be finalized in 2014, but even once that has been accomplished, it’s still up to the browser developers to support the standard consistently and completely — something they were never able to accomplish with HTML4. This points to HTML5 being a less solid platform than game developers might hope for.

Here’s some of the shortcomings I ran into while developing Karyote.

Color blending

The Game Maker HTML5 runner doesn’t support all the color blending modes that the Windows runner does. Color blending effects really make games look great when done well, so this is a huge disappointment graphically. I submitted a bug report for this and YYG closed it saying they can’t do anything to address it until the web standards catch up.


Surfaces kindof work in HTML5, but I have a major problem with my implementation in Karyote. Somehow, the game broke when I added a drawing surface, such that in normal run mode, most of the objects in the game don’t draw/don’t exist. I don’t have any understanding why, either.

It works fine in Windows, but in my HTML5 build it doesn’t work unless running in debug mode. The problem only exists when the game is not running in debug_mode, so debug mode is not helpful for me to trouble shoot with. In fact, the running version that I have up of the enhanced build currently is running in debug_mode, with the debug console hidden with CSS.

Creating sprites – no control over collision masks

This was my first game where I implemented procedurally generated sprites, and they work great in my Windows build, but not in HTML5. For some reason, when I create my sprite in HTML5, they don’t get a correct collision mask, and end up with a mask that is much too large, resulting in poor hit detection. It seems the collision mask is set to match the bounding box of the sprite, rather than the image. In the Windows build, the sprite automatically gets an accurate, precise collision mask.

There’s a gml function sprite_collision_mask() which is supposed to allow me to set the collision mask, but this doesn’t work in HTML5, either. In reading up on the issue, I learned this is a bug, and there’s presently a workaround available by using sprite_duplicate(), but this approach apparently can cause excess memory consumption and/or performance issues.

Drawing round objects are approximated

If I draw_circle() in gml, I don’t get a true circle. I get a polygon which has enough sides to reasonably approximate a circle, as long as the radius is sufficiently small. For even a moderately sized circle, you can see the flat edges and corners. Smooth, scalable vector graphics like you’d expect to see in an SVG or Flash animation don’t seem to be implemented yet.

Update: There’s a gml function, draw_set_circle_precision(), which can be used to set the number of sides in your circle-approximating polygon between 4 and 64. The more sides in your pseudo-circle, the slower they are drawn. This still isn’t a true circle, and will still have smoothness issues when scaled very large, but it’s better than nothing.


I still see much potential for HTML5 games, but until these issues have been fixed, it’s going to be hard for GM:Studio developers to equal the graphical quality of a good Flash developer. HTML5 is the heir apparent to replace Flash, but it’s still emerging and has yet to establish itself as a mature technology, and it will likely be a few years before this will happen.

Meanwhile, Flash is not the best game development platform, either, and it’s not the best web application platform, and while it’s under steady assault due to the mobile market spurning it, it’s still a more mature technology, and there are game development frameworks for it. While I can’t really recommend Flash to a new developer, if you’re a seasoned Flash developer you may want to stick with Flash for web browser games for a while longer yet, unless you really want to reach the mobile device market yet don’t want to do native development for some reason. But really, the answer for mobile devices is to do native development — the difference between a native Android or iOS game and what can be delivered through HTML5 is like night and day.

Or, if you’re really looking to make web browser games, you may want to take a look at some of the competing technologies, such as Construct, or Unity 3D, native HTML5, or something else.

GameMaker has some definite strengths, and is making steady strides, but the battle is far from over and there are other legitimate contenders in the market.

If you use GameMaker for other platforms, the HTML5 module is still worthwhile, but you’re not going to be able to do absolutely everything you want to be able to do with it. Buying it now still gives you a lot of capabilities, and if you haven’t yet, you’ll probably want to get started now in order to get familiar with them so that you’ll be ready to deliver robust, high quality games once the technology catches up. Waiting until the platform is perfect before jumping in is just not a good idea, as you want to have as much of a head start as you can get to sharpen your skills.

You’ll need to HTML5-ify a version of your project to work around some of the limitations of HTML5. Use your source control and fork a branch for your HMTL5 customizations and workarounds.

An HTML5 game has a lot of potential to be a good way to entice players to try your game, and may lead them to download your other builds, by providing a limited demo that runs right in their browser. And there are plenty of games that you can make right now that are “fully featured” as long as you don’t require the things that HTML5 isn’t capable of delivering right now. But if you want something with a lot of eye candy, the equal to what you can currently do on your Windows GameMaker projects, it’s just not there today.

Game Maker HTML5 and WordPress

Site traffic on the WordPress portion of csanyk.com is up due to Ludum Dare. According to my Jetpack stats counter, got about double my usual visits on Saturday, mostly as a result of posting my alpha build of Karyote. Traffic yesterday was about at the same level. It’s too early to know whether the increase in traffic will be sustained or not, but I’d expect there might be a small bump with a long tail.

This does not include hits of the actual Karyote game url, which is not hosted within my WordPress site. I haven’t looked at the awstats numbers yet, but I’m kindof curious to know many people are playing the game now.

I’d like to get my Game Maker HTML5 games better integrated to WordPress, but (as of the last time I played with doing that, during the GM:HTML5 beta, at least) it is tricky, and I haven’t gotten it working right yet.

Game Maker Studio auto-generates a basic HTML5 page for your game when you build it, but it’s not a simple matter to cut and paste the necessary code from that page into a WordPress page.

YoYoGames should probably think about providing CMS integrators so that people can have an easier time packaging their games in a way that allows them to integrate with WordPress, Blogger, Drupal, Django, and other CMS frameworks.

While I’m wishing, it’d also be cool if Studio has a feature allowing you to modify the template used to generate their HTML5 page. That feature could exist for all I know, I need to get more familiar with the HTML5 features of Studio.

Hopefully if they don’t, at least the dev community will step forward and address it.

LD48 24: Evolution. Karyote alpha

It’s not much at all yet, but I have an alpha build of my entry for Ludum Dare 24: Evolution up and running in HTML5.


It’s not really playable yet, at the moment I’m just working out some motion and object prototypes. Graphics are all placeholders. You’re always in the center. Move with the arrow keys. Left/Right turns, Up moves forward.

Somehow, I’m doing another game with a microorganism theme. LD#23 was Bactarium, LD#24 will be called Karyote. You control a single celled organism that mutates as you play.

I still need to figure out what exactly you’re doing in the game, but I have some ideas that I haven’t implemented yet, so I’m a little further along than it looks as far as the concept goes. I’m designing as I go, mainly this is design by fiddling around. That’s a dangerous way to go on any project, but when I don’t have much of an idea to begin with, I find it’s one of the most reliable ways of getting me going. Hopefully I’ve learned enough lessons from previous projects to avoid messing up the code architecture, so debugging and feature changes don’t turn into a nightmare toward deadline.

speed = s/invaders_count;

Another Space Invaders HTML5 update. The only thing I did with this build was fix the speed increase. It dawned on my after watching video of the original that the speed increase was gradual, not that it picked up at specific numbers of Invaders remaining. Reading about it on Wikipedia, I learned that the original Invaders were actually constrained in speed by the hardware, and that as you destroyed more of them, the CPU had fewer things to do so took care of updating the remaining ones in the phalanx faster and faster.

I still have yet to implement the bunkers; it’s not straightforward to do destructible sprites, and I haven’t yet looked into methods for accomplishing it yet, but apart from fixing the high score glitch that’s all that’s left.

Oh, I suppose I could give extra lives after a certain number of points scored, if you insist.

Play Space Invaders HTML5

Space Invaders HTML5 updated

I’ve uploaded an update for the Space Invaders HTML5 demo. This version is almost complete.

Play Space Invaders HTML5


  • Game Over works properly
  • Game resets properly when level clear

Both issues were caused because Game Maker HTML5 games do not work with user-defined Triggers when a game is built as an HTML5 application. I worked around this by re-implementing the Trigger code in the Step event instead.

New features:

  • Invader count is correct: 55 per screen.
  • Motherships.
  • Aliens speed up when their numbers are reduced. (This is proven in concept, I haven’t added all the speed ups yet. Aliens are still moving smoothly rather than marching in discrete steps.)
  • High Score screen now displays scores.

Still working on the High Score screen. It is not working correctly; the list only stores the top 1 score, not the top 10. It’s also not as pretty as it could be.