Upload
hiroshi-oyamada
View
4.266
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
Titanium+QuickTiGame2dでのシューティングゲームのつくりかた
(How to create a shooting game w/ QuickTiGame2d)
Original Update byJacek.NL(http://www.flickr.com/photos/jacek_nl/)
12年3月24日土曜日
Agenda
• my self-introduce (5min)
• How to create a shooting game w/ QuickTiGame2d (30min)
• Q&A (5min)
12年3月24日土曜日
non-developer*Recruiter for Web developer/designer
my self-introduce
12年3月24日土曜日
2 years experience:Windows + JScript1.5 years experience:Titanium Mobile
my self-introduce
12年3月24日土曜日
this blog trigger for me to learn Titanium Mobile
my self-introduce
12年3月24日土曜日
my self-introduce
12年3月24日土曜日
h5y1m141 @
12年3月24日土曜日
Intended audience
Original Update byJacek.NL(http://www.flickr.com/photos/thinkmedialabs/)
12年3月24日土曜日
Easy to create a shooting game w/ QuickTiGame2d
12年3月24日土曜日
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日土曜日
Which QuickTiGame2d API is used in this sample application?
GameView Scene Sprite
Original Update by jcarbaughhttp://www.flickr.com/photos/jcarbaugh/
Original Update by John Krollhttp://www.flickr.com/photos/jkroll/ Original Update by Daves Portfolio
http://www.flickr.com/photos/daves_portfolio/
12年3月24日土曜日
Ti.UI.Window
‘onload’ event :
‘enterFrame’ event:
GameViewScene Sprite
-initiazlie & game start
-redraw all sprites-check if enemies and bullets intersect
Each QuickTiGame2d API overview
‘touchmove’ event :-move tank to the left or right
12年3月24日土曜日
ここから3つのステップに分けて作り方解説します
Original Update byjeezny(http://www.flickr.com/photos/jeezny/)
12年3月24日土曜日
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 = Titanium.UI.createLabel({ top : 10, left : 10, height : 20, width : 'auto', color : 'white', text : 'Score: ' + totalScore});
12年3月24日土曜日
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日土曜日
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日土曜日
It’s not easy to arrange tankx postion
game.screen.width/2
tank.width/2
Incorrect Correct
(game.screen.width/2) -
(tank.width/2)
12年3月24日土曜日
game.screen.height
Incorrect Correct
It’s not easy to arrange tanky postion
game.screen.height -
tank.height
12年3月24日土曜日
STEP1-4
game.addEventListener('onload', function(e) { game.start();});win1.add(game);win1.add(scoreLabel);win1.open();
12年3月24日土曜日
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日土曜日
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日土曜日
Enemies positionleft&top:originX=0Y=0
In this case(y=100), enemies are arranged around here
12年3月24日土曜日
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日土曜日
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日土曜日
enterframeEvent?“enterframe event is fired on every time the view starts to draw the frame.”
0
1sec
2sec
Y:-100
Y:-90
Y:-80
Y:-100
Y:-50
Y:0
Y:-100
Y:0
Y:100
Speed=10
3sec Y:-70 Y:50 Y:200
ExampleSpeed=50 Speed=100
12年3月24日土曜日
As a result
Speed=10 Speed=50 Speed=100
12年3月24日土曜日
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日土曜日
STEP3-3// Check if enemies and bullets intersectfunction 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日土曜日
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日土曜日