Bookmark this on Hatena Bookmark
Hatena Bookmark - Ruby on enchant.js: Adding Group Class
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed

I woke up this morning with a lot of energy, so I sat down and packaged the Group class!

I’m now able to write a program like the one you see below.

group = Group.new
bear = Bear.new(32,32,"chara1.gif")
label = Label.new("Hello enchant.js");
button = Button.new(100,100,"Button");
group.addEventListener('enterframe'){|e|
self.y+=1
}
group.addChild(bear)
group.addChild(label)
group.addChild(button)
Game.rootScene.addChild(group)

Now, we can make the entire program we wrote previously move down!

Let’s take a look at what we changed in the HotRuby.js source code. As usual, we’re expanding HotRuby.prototype.classes.

Group is entity that makes another entity into a group, so it succeeds the Entity class.

"Group" : {
"initialize" : function(recver, args) {
recver.__instanceVars.entity = new Group();
HotRuby.prototype.classes.extendRubyClass("Group","Entity");
},
"addChild" : function(recver, args) {
recver.__instanceVars.entity.addChild(args[0].__instanceVars.entity);
},
"removeChild" : function(recver, args) {
recver.__instanceVars.entity.removeChild(args[0].__instanceVars.entity);
}
},

By gaining Group, we’ve acquired a simple but powerful ally.

In enchant.js techniques to make scrolling backgrounds into groups and control the priority of entities displayed on the screen are often used.

With what we’ve learned so far, I’ve been able to transport the majority of the games I’ve made with enchant.js.

We also use Scene’s push and pop quite frequently. enchant.js scenes are organized in stacks, with scenes on top of one another. When on an upper scene, events in the scenes below will be suppressed.

For instance, the processing that brings up “START” and stops the screen is performed using scene stacks.

In order to bring this to life, we’ll need to tweak the Game class.

"Game" : {
"assets" : function(recver, args) {
return args[0];
},
"rootScene" : function(recver, args) {
return HotRuby.prototype.classes.
newRubyObject("Scene",{scene:game.rootScene});
},
"pushScene" : function(recver, args) {
game.pushScene(args[0].__instanceVars.scene);
},
"popScene" : function(recver, args) {
game.popScene();
}
},

This time it’s super easy. The Scene class is already defined as the HotRuby class, all you need to do is deliver __instanceVars.scene as it is from “args” to Game.pushScene.

This will allow you to create a program like the one below.

testScene = Scene.new
startButton = Label.new("Tap to start!");
startButton.addEventListener('touchend'){|e| //Pop scene when label is clicked
Game.popScene()
}
startButton.x = 30
startButton.y = 140
testScene.addChild(startButton)
Game.rootScene.addChild(group)
Game.pushScene(testScene)

Here, testScene has been added above the previous scene. When you click “Tap to start!,” testScene is popped, and group moves.

We’ve now completed most of the preparations necessary to make a game. We’re still missing the Map class wrap, but as this is pretty advanced we’ll leave it for later.

We haven’t covered everything, but this should let us make a game. Next time, we’ll try making a simple game with HotRuby!