NME Game Example: “Pirate Pig”

If you are familiar with webOS, you may have heard of Enyo, a Javascript framework which powers many of the built-in applications for the HP TouchPad. Recently, Enyo was released as open-source software, so you can use the framework on more platforms in addition to webOS, such as iOS, Android or BlackBerry.

If you need to create an application, Enyo is a choice you may want to consider. You can learn more at enyojs.com, and if you are a fan of Haxe-based development, there are externs for Enyo 1.0 on haxelib which can enable you to use the framework while also benefiting from the many advantages of haxe JS.

Although most of the samples for Enyo are applications, at least one sample, “Pirate Pig,” is that of a game. It is a quirky game that uses similar mechanics to Bejeweled. You can view the original version here:

http://www.enyojs.com/samples/piratepig/

The Challenge

I wanted to discover how difficult it would be to create the same game using NME. I would not use any of the original Javascript source code, but instead would use the same assets to recreate the same mechanics.

In the spirit of a game jam, I wanted to create the game in two days. In the interest of supporting my wife, I wanted to also keep it during the day instead of working late.

Day 1

After feeling inspired to make the game, I started my project at 11:00 AM.

“Maybe this is a silly question…

But why do the carrots and lemons in Pirate Pig have mouse ears?”

After around two hours, I had built the basic layout of the game. The original chooses between three board sizes, depending on the size of your screen or window. I made the decision to have the game scale smoothly, because this is easy to do in NME and I did not see another good reason to go with only a few sizes.

I was finished populating the game board, and needed to begin checking for matched tiles.

There are multiple approaches you could take for finding matches. However you look at it, it is somewhat tricky to make sure that you accurately find matches, and take into account moving or empty tile locations.

Since Bejeweled is a popular game, I thought there might be a forum or blog post somewhere with the function I was looking for. When that did not turn up as I hoped, I decided to write my own algorithm, based on a simple check for horizontal matches, then vertical matches separately. This works well enough, and though it would be nice to count bisecting matches using a higher point score, I feel that the existing code accomplishes what it needs to for now.

A few more hours and the matching/swapping behaviors are both working as expected. The “dropTiles” method is creating all kinds of madness. I put a pause on fixing the behavior, commented it out and made sure everything was solid so far. I also played with motion blur, which helped make the game feel more dynamic.

Day 2

I had made the mistake of writing “tiles[selectedTile.row][selectedTile.row]” at one part of my code by accident. No wonder my tiles were jumping out of order! I was using the row number twice where I should have been using the row and column. I also removed my timer-based logic and added an Event.ENTER_FRAME listener instead.

After an hour and a half I was ready to begin adding sound. It worked great when I tried it in Flash, webOS or Windows, but I was having problems with sounds playing on Android. A part of this was caused by a slight bug in the NME command-line tools, when using custom IDs for sounds on Android (which I fixed on SVN today), but another problem was that I was playing my sounds without saving the sound to a class variable.

As a result, my sounds on Android were being collected before the Android SoundPool began streaming. I usually save references to my sounds to prevent this issue, but on Windows, webOS and Flash it did not seem to be necessary.

I let Deborah and the kids check out the game on my TouchPad, then I submitted to the webOS App Catalog and the Android Market. I could build for iOS and submit it today as well, but I have a feeling that the application may not be approved by Apple’s picky app review team, since this is meant more as a sample than a full commercial game.

The Results

As the original game is open-source, this version of Pirate Pigs is also open-source. Please feel free to download the source code and assets to build the game on your own.

I also have posted the Flash version online, as well as packages for webOS, Android and a ZIP file for Windows. If you would like me to build and post archives for Mac, Linux or a package for iOS, please let me know in the comments.

Download

Conclusion

This has been a fun experience, and I am happy to offer a complete sample you can use.

If I were to invest more time, I would like to see a game menu, additional UI to congratulate the player when they make a lot of matches, difficulty levels, an end game screen when there are no possible matches, and a looping background music track, among other things.

However, I’ve had fun playing this game and hope this all is a benefit for you!

 

  • allanbishop

    Works really well on my Galaxy S2 :D. Did find a bug though where I lined up three icons and they did not score any points causing the game to crash soon after, but that was after quite a lot of game time!

    Thanks for taking the time to make this 🙂

  • You could probably get away with removing the need for internet on the android version. One less permission request. Definitely no huge deal though.

  • Mike

    Did you try publishing to HTML5? It doesn’t work for me – I get the title/logo and the footer, but that’s about it. The theme music plays once when the page loads though 🙂

    Any idea what might be up with it?

  • Son Atrus

    Could you please provide the iOS source code or application? Very interesting to look on.

  • aaulia

    Wow its pretty amazing how simple it is, just 3 hx file. It shows how much NME simplify multi-platform development :). Great on Josh. It run perfectly on my Galaxy Nexus.

  • aaulia

     There is not “special” source code for iOS/OSX, you just take the Source code that is here then build it using haXe & NME on OSX

  • Vadim M.

     For me too

  • Pengshaokun

    I am learning Haxe+NME development, encounter layer problem, JS control display object layer sequence and AS have access, are mainly the object layer display problems, so I can’t do a popup window or the game other window. If you have a good program, please write an example, thank you. I do not understand English, this is the translation software translation.

  • Marat

    http://files.mail.ru/ZHWV00
    This is mac version

  • Emailku

    thank you very much…
    run perfect on my galaxy young

  • Xufenglu

    I am using youe source try to compile to android apk, but it doesn’t work, this message shows up:
    BUILD FAILED
    Target “debug” does not exist in the project “PiratePig”.

  • That’s strange. Is it working when you compile for other targets?

    Which version of the Android SDK and NDK do you have installed?

  • If you guys didn’t see it already, check out this version:

    http://www.joshuagranick.com/blog/2012/04/12/html5-pirate-pig-sample/

  • Josh,

    Very well done man. I’m new to NME but not to flash, and haxe code is almost identical, but what I’m really curious about is how you go about setting up the properties for everything. I use flash builder.. If I make a new project, it generates some files for me, thats great and all, but doesn’t quite do the job. You’ve got an sln file in there, the nmml file has a different setup than what flashdevelop generates for me, etc.. What is your process to setup your project files? I’m sorry if you have to give a lengthy answer, I’m just very curious as how a pro like yourself goes into setting those files up. Thanks for spending the time to read this, and THANKS for contributing to open source!

  • FlashDevelop was always my favorite IDE for Actionscript 3 development. It was how I heard of Haxe to begin with.

    There should be an “hxproj” file, which is a project file for FlashDevelop. The “sln” file is for MonoDevelop, which I have used on Linux or Mac in lieu of FlashDevelop. The first thing I did was to create my own FlashDevelop project template to use when creating NME projects.

    If you are interested in using Flash Builder, you should be able to (probably?) make a project template to simplify the process of generating new projects. Otherwise, I have a small project template at http://github.com/jgranick/nme-project that you could use to clone then edit for a new project.

    All you really need is the NMML file, which can be compiled on the command-line, or hooked into an IDE that support the NME build commands, built-in. Either way it should center around your NMML project file.

    When I use FlashDevelop, I still use my own project template (shared on the NME download page), since the template that is included in FlashDevelop is really my taste.

  • Josh, sorry, I meant to say Flash Develop, not Flash Builder.. I’m not too big a fan of proprietary stuff anymore. I also took a look at your videos so that will help me alot with seeing how you do things. Thanks for having this resourceful site

  • A small doubt: Can I cross compile to linux and mac from a windows machine using NME? If so please tell me how?

  • hi.. i am new to it and i compiled this sample using flash develop for windows platform. But when i run the exe it shows me first a black command prompt sheel and then the actual game. Pls let me what i am missing.

  • Almost…

    Neko is a VM that is available for Windows, Mac and Linux. NME should be configured to create a Neko standalone binary when you want to target WIndows, Mac or Linux from each other.

    The main problem is that Neko does not seem to find its dependent binaries when it searches for libraries. I’m hoping this can be resolved before Neko 2 is officially released, and have posted on the issue list at http://code.google.com/p/nekonme to try and make sure the issue is known.

    With the library search path issue out of the way, I do not see any reason why this could not be possible 🙂

  • Bernardo Braga

    Joshua Granick i’ve seen your work and it seems you are very good! I’m trying to understand how can I put admob working on some app, in order to put my apps in the google market. Can you explain or make an exemple on how to join admob in haxe nme projects?

    thanks in advence!

  • There is a project called “nmex” which looks to have support for admob. I haven’t tried using it, but that might be a good place to start 🙂

    http://code.google.com/p/nmex/

  • Luis

    There is a bug in “Tile.hx”. Mouse and button mode is disabled when removing a tile with animation (in remove(…)), but is not reenabled when the tile is used again (can be done in initialize()).

  • BtkMkh

    Bad implement !
    I cannot drag drop in my table html5 browser ! Enyojs PiratePig is better.

  • Hi!

    This was originally made to run native, as an installed app for mobile. If you use it that way, I’m sure you’ll find that the tap and drag behavior works very well, and feels natural. This works in Flash as well. The sample was not originally designed for HTML5, though this behavior does work if you lock the size of the window so it does not scroll.