Original Update byJacek.NL                (http://www.flickr.com/photos/jacek_nl/)                 Titanium+QuickTiGame2dでの...
Agenda              • my self-introduce (5min)              • How to create a shooting game w/                QuickTiGame2...
my self-introduce                           non-developer              *Recruiter for Web developer/designer12年3月24日土曜日
my self-introduce              2 years experience:Windows + JScript              1.5 years experience:Titanium Mobile12年3月...
my self-introduce              this blog trigger for me to learn                      Titanium Mobile12年3月24日土曜日
my self-introduce12年3月24日土曜日
h5y1m141   @12年3月24日土曜日
Original Update byJacek.NL              (http://www.flickr.com/photos/thinkmedialabs/)                  Intended audience12...
Easy to create a shooting              game w/ QuickTiGame2d12年3月24日土曜日
What s QuickTiGame2d?     •   Game engine for Titanium Mobile developed by Kota Iguchi         •    latest version support...
Which QuickTiGame2d API is used in this                        sample application?        GameView                        ...
Each QuickTiGame2d API overview                                               Scene              Sprite              Ti.UI...
ここから3つのステップに分けて                    作り方解説します        Original Update byjeezny        (http://www.flickr.com/photos/jeezny/)12...
STEP1:     STEP2:    STEP3:    背景と自機配置12年3月24日土曜日               弾道と敵機を配置 弾道&敵機を動かす
source code at Gist                   (https://               gist.github.com/                  2132571)12年3月24日土曜日
STEP1-1    var win1 =    Titanium.UI.createWindow({backgroundColor:#black});    var totalScore = 0;    var scoreLabel = Ti...
STEP1-2    var quicktigame2d =    require(com.googlecode.quicktigame2d);    var game = quicktigame2d.createGameView();    ...
STEP1-3    var tank = quicktigame2d.createSprite({      image:images/tank.png    });    tank.x = (game.screen.width/2) - (...
It s not easy to arrange tank                         x postion                Incorrect           Correct                ...
It s not easy to arrange tank                         y postion                Incorrect                   Correct        ...
STEP1-4    game.addEventListener(onload, function(e) {     game.start();    });    win1.add(game);    win1.add(scoreLabel)...
STEP2-1    // 中略    scene.add(tank);    var aliens = [];    var aliensSpeed = [];    var bullets = [];    var bulletsSpeed...
STEP2-2    function initAliens(){      for (var i = 0; i < 5; i++) {         aliens[i]= quicktigame2d.createSprite({      ...
Enemies position                  left&top:origin                  X=0                  Y=0                             In...
STEP2-3    function initBullet(){      for(var j=0;j< 10;j++){         bullets[j]= quicktigame2d.createSprite({           ...
STEP3-1    // 中略    game.addEventListner(‘onload’・・);    game.addEventListener(enterframe, function(e) {      bulletCollid...
enterframeEvent?     “enterframe event is fired              Example     on every time the view     starts to draw the fra...
As a result       Speed=10   Speed=50   Speed=10012年3月24日土曜日
STEP3-2    function updateAliensPosition(){      for (var i = 0; i <5; i++) {        aliens[i].y += aliensSpeed[i] * Math....
STEP3-3    // Check if enemies and bullets intersect    function bulletCollidesWithAliens(){      for (var i = 0; i < 10; ...
おまけ:ゲーム難易度設定     •   難易度について                          var gameLevel ={         •    弾道の数、速度や敵      easy:{                 ...
Upcoming SlideShare
Loading in …5
×

2012 03-24-titanium plusquicktigame2d

4,151 views
4,068 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,151
On SlideShare
0
From Embeds
0
Number of Embeds
2,257
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2012 03-24-titanium plusquicktigame2d

  1. 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. 2. Agenda • my self-introduce (5min) • How to create a shooting game w/ QuickTiGame2d (30min) • Q&A (5min)12年3月24日土曜日
  3. 3. my self-introduce non-developer *Recruiter for Web developer/designer12年3月24日土曜日
  4. 4. my self-introduce 2 years experience:Windows + JScript 1.5 years experience:Titanium Mobile12年3月24日土曜日
  5. 5. my self-introduce this blog trigger for me to learn Titanium Mobile12年3月24日土曜日
  6. 6. my self-introduce12年3月24日土曜日
  7. 7. h5y1m141 @12年3月24日土曜日
  8. 8. Original Update byJacek.NL (http://www.flickr.com/photos/thinkmedialabs/) Intended audience12年3月24日土曜日
  9. 9. Easy to create a shooting game w/ QuickTiGame2d12年3月24日土曜日
  10. 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/812年3月24日土曜日
  11. 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. 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 right12年3月24日土曜日
  13. 13. ここから3つのステップに分けて 作り方解説します Original Update byjeezny (http://www.flickr.com/photos/jeezny/)12年3月24日土曜日
  14. 14. STEP1: STEP2: STEP3: 背景と自機配置12年3月24日土曜日 弾道と敵機を配置 弾道&敵機を動かす
  15. 15. source code at Gist (https:// gist.github.com/ 2132571)12年3月24日土曜日
  16. 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. 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. 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. 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/212年3月24日土曜日
  20. 20. It s not easy to arrange tank y postion Incorrect Correct game.screen. height game.screen.height - tank.height12年3月24日土曜日
  21. 21. STEP1-4 game.addEventListener(onload, function(e) { game.start(); }); win1.add(game); win1.add(scoreLabel); win1.open();12年3月24日土曜日
  22. 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. 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. 24. Enemies position left&top:origin X=0 Y=0 In this case(y=100), enemies are arranged around here12年3月24日土曜日
  25. 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. 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. 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:20012年3月24日土曜日
  28. 28. As a result Speed=10 Speed=50 Speed=10012年3月24日土曜日
  29. 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. 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. 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日土曜日

×