Your SlideShare is downloading. ×
0
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
2012 03-24-titanium plusquicktigame2d
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2012 03-24-titanium plusquicktigame2d

3,960

Published on

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

No Downloads
Views
Total Views
3,960
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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/designer12年3月24日土曜日
  4. my self-introduce 2 years experience:Windows + JScript 1.5 years experience:Titanium Mobile12年3月24日土曜日
  5. my self-introduce this blog trigger for me to learn Titanium Mobile12年3月24日土曜日
  6. my self-introduce12年3月24日土曜日
  7. h5y1m141 @12年3月24日土曜日
  8. Original Update byJacek.NL (http://www.flickr.com/photos/thinkmedialabs/) Intended audience12年3月24日土曜日
  9. Easy to create a shooting game w/ QuickTiGame2d12年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/812年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 right12年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/212年3月24日土曜日
  20. It s not easy to arrange tank y postion Incorrect Correct game.screen. height game.screen.height - tank.height12年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 here12年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:20012年3月24日土曜日
  28. As a result Speed=10 Speed=50 Speed=10012年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日土曜日

×