Haxe Game : Color Word , a demonstration of Stroop Effect

So I create a simple game for the weekend. I just feel the urge to create it because I love the idea so much :))
The idea is simple, it's demonstrate what it's called by Stroop Effect. Simply said, Brain will have difficult to process a color when conflicted with different color name. Good explanation here .
This game created with Haxe NME . It also has the android version , you can download it here

enjoy :)

Animated Sprite using Bitmap Spritesheet with Haxe NME/OpenFL Spritesheet Library

NME comes with great spritesheet lib which can be installed with haxelib install spritesheet command on commandline. Unfortunately it lacks documentation and how to example tutorial. The only spritesheet tutorial available is the singmajesty's tutorial which also doesn't give a clue about how to work with bitmap spritesheet. So I tried to figured it out myself. And turns out it's not that hard, so I'll tell you how in a fast and effective way.

The first thing needed to create animated sprite of course is the spritesheet itself. I will use the spritesheet I took from opengameart as example.

also don't forget to add  spritesheet lib to nmml with haxelib tag

<haxelib name="spritesheet" />

to load the bitmap and parse it as animation frames we can use BitmapImporter class inside com.ecleticdesignstudio.spritesheet.importers package. this class is really simple because it's only contain one static function called create(). as the input parameter it ask for the BitmapData , column count, row count, frame width, frame height, and some additional parameter which I'm not sure what it is so I'll leave it like that for now. The create() methods gives output a Spritesheet class, we need to create a variable to hold this output.

var spritesheet:Spritesheet = BitmapImporter.create(Assets.getBitmapData("img/kit_from_firefox.png"), 3, 9, 56, 80);

we can (and must) assign BehaviourData this Spritesheet object. BehaviourData required to define how the spritesheet should be used, which frame should be played at what speed(fps) and should it be looped or not.
for this example I create 9 behaviour for the spritesheet and assigns it to each row of frames, and I give different parameter for each behaviour. What's important for this BehaviourData input parameter is the name and frame number.

spritesheet.addBehavior(new BehaviorData("stand", [0, 1, 2], true));
spritesheet.addBehavior(new BehaviorData("down", [3, 4, 5], false,15));
spritesheet.addBehavior(new BehaviorData("jump", [6, 7, 8], false,15));
spritesheet.addBehavior(new BehaviorData("hit", [9, 10, 11], false,15));
spritesheet.addBehavior(new BehaviorData("punch", [12, 13, 14], false,5));
spritesheet.addBehavior(new BehaviorData("kick", [15, 16, 17], false,15));
spritesheet.addBehavior(new BehaviorData("flypunch", [18, 19, 20], false,10));
spritesheet.addBehavior(new BehaviorData("flykick", [21, 22, 23], false,10));
spritesheet.addBehavior(new BehaviorData("dizzy", [24, 25, 26], true));

The spritesheet itself is ready, but we can't use it directly. spritesheet library has their own sprite class for animation called AnimatedSprite. We can use this AnimatedSprite to animate the spritesheet created before. to use it simply input the spritesheet into the constructor parameter.

var animated:AnimatedSprite = new AnimatedSprite(spritesheet, true)

AnimatedSprite need to update itself for animation, so we must call it's update() method on each update cycle

 public function onEnterFrame(e:Event):Void
 {
  var delta = Lib.getTimer()- lastTime;
  animated.update(delta);
  lastTime = Lib.getTimer();
 }

To play animation we can call behaviour names from spritesheet using showBehaviour() method or showBehaviours() if we want to call a list of behaviour consecutively. We can also queue behaviour using queueBehaviour(), the method will queue behaviour and animate it after the current animation finished. Remember that a looping behaviour will loop forever and so it should not be used inside the behaviour queue (if we use showBehaviours() or queueBehaviour())

animated.showBehavior("stand");
animated.showBehaviors(["down","jump","hit","punch"]);

So that's what I know about how to use spritesheet library . I hope it could help as the a simple tutorial of how to use Haxe NME spritesheet library because spritesheet is a fundamental thing in game. and spritesheet lib is a neat library for a playing animation. :)

Here is the result: https://dl.dropboxusercontent.com/u/27073998/BitmapSpritesheet.swf
you could find the example source here .

Cheers! :)

Update : Dealing with Haxe 3 Change

if you switch to haxe 3 you may deal with error saying that package not found. that's happen because spritesheet library on haxe 3 use different package name. The solution is to change the package name

From

1 2 3 4

import com.eclecticdesignstudio.spritesheet.AnimatedSprite; import com.eclecticdesignstudio.spritesheet.data.BehaviorData; import com.eclecticdesignstudio.spritesheet.importers.BitmapImporter; import com.eclecticdesignstudio.spritesheet.Spritesheet;

to

1 2 3 4

import spritesheet.AnimatedSprite; import spritesheet.data.BehaviorData; import spritesheet.importers.BitmapImporter; import spritesheet.Spritesheet;

there you go. now it will run without any problems . Good luck! :)

NME Gesture Library

I was struggling with how to do gestures with NME . I need to do swipe control in my games but I can't found any good gesture library to use.
Then luckily I stumbled upon this roxlib library. it was after browsing through the haxe google group that I found a  thread about it. I tested it on my android and it works really well

it's a good library but really need documentation about how to use it.
I've figured out how it works and maybe will create some examples later.
currently it support pan, pinch , swipe, long press, tap, double tap, and some other's that I forgot. (well at least I can use the swipe :p )

the downside is it's need some sprite with graphic registered as the input listener so an empty sprite without anything inside would be no good. I use empty sprite as the input listener so this really troubles me. My solution is create a screen-sized transparent image as the graphic and add it to the sprite. it works well, but if there's any better solution maybe I'll try that.

Integrating Chartboost with Haxe NME for Android

Haxe NME is a great cross platform framework for game which support wide range of platform from desktop to mobile. It compiles to native, and have the similarity with flash AS3. NME is extensible and have numbers of useful third party library support. I prefer it mostly because it could compile to many different platform especially flash, Android, iOS, and Blackberry10.

maybe the only problem with NME is the lack of documentation and not so active community outside the forum and mailing list. there's still so many things not covered in the tutorial and some googling of NME-Android related things won't give you direct answer to the problem. stackoverflow tag of haxe/nme tag doesn't have so much question and  reddit r/haxe sub just have a small number of reader.

One problem stuck me now is integration of ads, specifically Chartboost . Chartboost is a really good ads network with a high CPM. before using NME I used libgdx to create android games, and chartboost integration with libgdx is easy as breeze because it's covered on the tutorial.

I searched everywhere looking for how to integrate chartboost (Android) on NME and it result on nothing. Luckily, after struggling so much with so many different keyword I stumbled upon gigglingcorpse's blog post and found some answer. I contacted gigglingcorpse and after consulting for a while finally I could integrate the ads! Big Thanks!

I feel the urge to write this tutorial to help others give more understanding about of how to integrate chartboost (Android) with NME. It's not really hard but maybe it could confuse new player which still not understand about how NME work behind the screen.

So let's start!

First thing first! In order to integrate chartboost ads in our game we need to first register the app inside chartboost dashboard. just register on chartboost and Add App to get the APP_KEY and SIGNATURE.   I won't tell you how to do that here. just look it up on the official help yourself. just make sure the test mode enabled . also you need to create campaign and check the created app so the app could display ads inside.

After we got the APP_ID and APP_SIGNATURE we can integrate it in our NME project.

I used FlashDevelop in this tutorial so I will create a HelloWorld project for the purpose of tutorial.

First thing to do is adding chartboost library to the project. in order to do that we need to create libs folder inside assets folder so the structure will be like assets/libs. Download the chartboost android library from the official download and then copy it to libs folder .

add chartboost library

Then on the application.nmml write a template tag to rename it as lib folder in android

<template path="assets/libs" rename="libs" if="android" />

Adding chartboost library is done! Next step is putting the code.

Chartboost integration require us to add some code on Activiy class in Android. So we need to override the default MainActivity.java emplate. MainActivity.java s an android class generated by haxe as the Activity class to launch in android. the default MainActivity.java will looks like a blank class as seen below

package ::APP_PACKAGE::;

import android.os.Bundle;

public class MainActivity extends org.haxe.nme.GameActivity {
}

We cannot add code directly to the generated MainActivity.java class because the code added will be wiped out when we do the next build. In order to override the MainActivity.java class we need to change the MainActivity.java template and fill it with necessary code. To do that , copy MainActivity.java template from nme installation folder. The template located in templates\default\android . copy the MainActivity template to project directory and then register it as template on application.nmml . change the [package_path] with your app package path

<template path="MainActivity.java" rename="src/com/fugo/helloWorld/HelloWorld/MainActivity.java" if="android" />

Open MainActivity.java and add the code as instructed on the official tutorial . there's nothing need to be changed once you got it done so you can just copy paste code below to your MainActivity.java .just remember to change "YOUR_APP_ID" and "YOUR_APP_SIGNATURE" with the APP_ID and APP_SIGNATURE.

package ::APP_PACKAGE::;

import android.os.Bundle;
import com.chartboost.sdk.*;

public class MainActivity extends org.haxe.nme.GameActivity {
 private Chartboost cb;
 
 @Override
  protected void onCreate(Bundle state) {
        super.onCreate(state);   
  
  // Configure Chartboost
  this.cb = Chartboost.sharedChartboost();
  String appId = "YOUR_APP_ID";
  String appSignature = "YOUR_APP_SIGNATURE";
  this.cb.onCreate(this, appId, appSignature, null);
 
  // Notify the beginning of a user session
  this.cb.startSession();

  // Show an interstitial
  this.cb.showInterstitial();

    }
 
 @Override
 protected void onStart() {
  super.onStart();

  this.cb.onStart(this);
 }

 @Override
 protected void onStop() {
  super.onStop();

  this.cb.onStop(this);
 }

 @Override
 protected void onDestroy() {
  super.onDestroy();

  this.cb.onDestroy(this);
 }

 @Override
 public void onBackPressed() {

  // If an interstitial is on screen, close it. Otherwise continue as normal.
  if (this.cb.onBackPressed())
   return;
  else
   super.onBackPressed();
 }
}

we could also use the code above as a template for next project without changing much of the code, just the APP_ID and APP_SIGNATURE.

save up the change and.... test run it on android.

Voila! Chartboost (Android) with HaxeNME

Integration done!
to give more control of the ads showing , you could change the showInterstitial() method with cacheInterstitial() in onCreate() and then call cb.showInterstitial() through JNI call from haxe. for convenience I created a public static method called showChartboost() in MainActivity.java and call it from haxe like below

var showChartboost = JNI.createStaticMethod("com/amagine/plate2/MainActivity", "showChartboost", "()V");
showChartboost();

there.. from here on much can be done via JNI so I'll leave it up to you about the advanced things. thanks for reading!

~End of Tutorial~

Hello World

This is a test post.

I'm gonna make this blog as a simple diary of my programming days~

 printf("Hello World");