1. Original Update byJacek.NL
(http://www.flickr.com/photos/jacek_nl/)
Titanium＋QuickTiGame2dでの
シューティングゲームのつくりかた
(How to create a shooting game w/ QuickTiGame2d)
12年3月24日土曜日

2. Agenda
• my self-introduce (5min)
• How to create a shooting game w/
QuickTiGame2d (30min)
• Q&A (5min)
12年3月24日土曜日

3. my self-introduce
non-developer
*Recruiter for Web developer/designer
12年3月24日土曜日

4. my self-introduce
2 years experience:Windows + JScript
1.5 years experience:Titanium Mobile
12年3月24日土曜日

5. my self-introduce
this blog trigger for me to learn
Titanium Mobile
12年3月24日土曜日

6. my self-introduce
12年3月24日土曜日

7. h5y1m141 @
12年3月24日土曜日

8. Original Update byJacek.NL
(http://www.flickr.com/photos/thinkmedialabs/)
Intended audience
12年3月24日土曜日

9. Easy to create a shooting
game w/ QuickTiGame2d
12年3月24日土曜日

10. What s QuickTiGame2d？
• Game engine for Titanium Mobile developed by Kota Iguchi
• latest version supports tiled map integration,Box2d physics... and
so on.
• You can download it here(http://code.google.com/p/
quicktigame2d/)
2011/12/28 2012/1/8
12年3月24日土曜日

11. Which QuickTiGame2d API is used in this
sample application?
GameView Scene Sprite
Original Update by jcarbaugh Original Update by John Kroll
Original Update by Daves Portfolio
http://www.flickr.com/photos/jcarbaugh/ http://www.flickr.com/photos/jkroll/
http://www.flickr.com/photos/daves_portfolio/
12年3月24日土曜日

12. Each QuickTiGame2d API overview
Scene Sprite
Ti.UI.Window
GameView
‘onload’ event :
-initiazlie & game start
‘enterFrame’ event:
-redraw all sprites
-check if enemies and bullets intersect
‘touchmove’ event :
-move tank to the left or right
12年3月24日土曜日

13. ここから3つのステップに分けて
作り方解説します
Original Update byjeezny
(http://www.flickr.com/photos/jeezny/)
12年3月24日土曜日

14. STEP1: STEP2: STEP3:
背景と自機配置
12年3月24日土曜日
弾道と敵機を配置 弾道＆敵機を動かす

15. source code at Gist
(https://
gist.github.com/
2132571)
12年3月24日土曜日

16. STEP1-1
var win1 =
Titanium.UI.createWindow({backgroundColor:'#black'});
var totalScore = 0;
var scoreLabel = Titanium.UI.createLabel({
top : 10,
left : 10,
height : 20,
width : 'auto',
color : 'white',
text : 'Score: ' + totalScore
});
12年3月24日土曜日

17. STEP1-2
var quicktigame2d =
require('com.googlecode.quicktigame2d');
var game = quicktigame2d.createGameView();
var scene = quicktigame2d.createScene();
game.screen = {width:320, height:480};
game.fps = 30;
game.color(0, 0, 0);
game.pushScene(scene);
12年3月24日土曜日

18. STEP1-3
var tank = quicktigame2d.createSprite({
image:'images/tank.png'
});
tank.x = (game.screen.width/2) - (tank.width/2);
tank.y = game.screen.height - tank.height;
var back = quicktigame2d.createSprite({
image:'images/back.png'
});
back.x = (game.screen.width/2) - (back.width/2);
back.y = 480 - back.height;
scene.add(back);
scene.add(tank);
12年3月24日土曜日

19. It s not easy to arrange tank
x postion
Incorrect Correct
(game.screen.width/2)
-
game.screen. (tank.width/2)
width/2
tank.width/2
12年3月24日土曜日

20. It s not easy to arrange tank
y postion
Incorrect Correct
game.screen.
height
game.screen.height
-
tank.height
12年3月24日土曜日

21. STEP1-4
game.addEventListener('onload', function(e) {
game.start();
});
win1.add(game);
win1.add(scoreLabel);
win1.open();
12年3月24日土曜日

22. STEP2-1
// 中略
scene.add(tank);
var aliens = [];
var aliensSpeed = [];
var bullets = [];
var bulletsSpeed = [];
game.addEventListener('onload', function(e) {
initAliens();
initBullet();
game.start();
});
// 中略
win1.open();
function initBulletsPostion(){
return tank.x + (tank.width/2) -(bullets[0].width/2);
}
12年3月24日土曜日

23. STEP2-2
function initAliens(){
for (var i = 0; i < 5; i++) {
aliens[i]= quicktigame2d.createSprite({
image:'images/alien1.png'
});
aliensSpeed[i] = 5;
aliens[i].x = Math.random() * game.screen.width;
aliens[i].y = -100;
scene.add(aliens[i]);
}
}
12年3月24日土曜日

24. Enemies position
left&top:origin
X=0
Y=0
In this
case(y=100),
enemies are
arranged
around here
12年3月24日土曜日

25. STEP2-3
function initBullet(){
for(var j=0;j< 10;j++){
bullets[j]= quicktigame2d.createSprite({
image:'images/bullet.png'
});
bullets[j].x = initBulletsPostion();
bullets[j].y = tank.y - (bullets[j].height);
bulletsSpeed[j] = 10;
scene.add(bullets[j]);
}
}
12年3月24日土曜日

26. STEP3-1
// 中略
game.addEventListner(‘onload’・・);
game.addEventListener('enterframe', function(e) {
bulletCollidesWithAliens();
updateAliensPosition();
updateBulletPosition();
});
game.addEventListener('touchmove',function(e){
tank.x = e.x;
});
initBulletPosition(){....}
12年3月24日土曜日

27. enterframeEvent?
“enterframe event is fired Example
on every time the view
starts to draw the frame.”
Speed=10 Speed=50 Speed=100
0 Y:-100 Y:-100 Y:-100
1sec Y:-90 Y:-50 Y:0
2sec Y:-80 Y:0 Y:100
3sec Y:-70 Y:50 Y:200
12年3月24日土曜日

28. As a result
Speed=10 Speed=50 Speed=100
12年3月24日土曜日

29. STEP3-2
function updateAliensPosition(){
for (var i = 0; i <5; i++) {
aliens[i].y += aliensSpeed[i] * Math.random();
if(aliens[i].y > 480){
aliens[i].y = -100;
}
}
}
function updateBulletPosition(){
for (var i = 0; i < 10; i++) {
bullets[i].y -= bulletsSpeed[i];
if(bullets[i].y < 0 || bullets[i].y > 480){
bullets[i].x = initBulletsPostion();
bullets[i].y = tank.y - (bullets[i].height);
}
}
}
12年3月24日土曜日

30. STEP3-3
// Check if enemies and bullets intersect
function bulletCollidesWithAliens(){
for (var i = 0; i < 10; i++) {
for(var j=0;j<5;j++){
var flg = bullets[i].collidesWith(aliens[j]);
if(flg){
totalScore +=100;
scoreLabel.text = ('Score:' + totalScore);
aliens[j].y = -100;
// reset bullet poition on gun of tank
bullets[i].x = initBulletsPostion();
bullets[i].y = tank.y - (bullets[i].height);
}
}
}
}
12年3月24日土曜日

31. おまけ：ゲーム難易度設定
• 難易度について
var gameLevel ={
• 弾道の数、速度や敵 easy:{
MAXALIENS :5,
の数、移動スピード MAXBULLETS :15,
ALIENSSPEED:10,
といったパラメータ BULLETSSPEED:15
を変更で実現可能 },
hard:{
• マジックナンバー防止 MAXALIENS :10,
MAXBULLETS :10,
ALIENSSPEED:15,
• それぞれのスプライ BULLETSSPEED:10
}
トに直接値を設定し };
てしまうと理解でき var selectedLevel = 'easy';
function initAliens(){
なくなる可能性大 var counter = gameLevel[selectedLevel].MAXALIENS;
for (var i = 0; i < counter; i++) {
• こんな感じにしてお
くと良いかも→
12年3月24日土曜日