1. QuickTiGame2dとは？
✤ TitaniumMobile向けの2Dゲーム開発のためのフレームワーク
✤ 札幌に住んでる井口さんという方が開発中
2011年12月28日 2012年1月8日

2. スマフォ向けゲーム開発ツール
開発ツール 開発言語 特徴
Titanium Mobile iPhone/Android向けのアプ
JavaScript
+QuickTiGame2d リがリリース出来る
ブラウザ上で稼働するWeb
enchant.js JavaScript
アプリケーション
ngCore JavaScript DeNAが開発してる
Unity Technologies社が開
Unity JavaScript 発しており、GREEがこの会
社と提携してる

3. QuickTiGame2dの主な機能
jcarbaugh John Kroll Daves Portfolio
「舞台」のような位置づけ。 「俳優」のような位置づけ。
「監督」のような位置づけで 例えばステージ１は誰でもクリ 画像を表示する機能はもちろん
ゲームの進行管理を担う アーできる程度の敵を配置する のこと、画像の変形、移動とい
・弾道と敵が当たった時のアク だけにしておき、ステージ２は う処理はもちろんのこと、画像
ションを決定する 少し難易度をあげる・・・とい 同士が重なってるかどうか簡単
・ゲームのスコアー管理をする うようなゲームにしようとした に判別出来たりするので、ゲー
・何面まで進んだのか管理する 場合にこの「舞台」を切り替え ム開発者が面倒な処理を考えて
ることで簡単に実現可能 なくても済む

4. 実際の画面ではこのように配置されます
Window
オブジェクト
GameView Scene Sprite
Score
Titanium.UI.Label

5. ソースコード解説：初期設定
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var totalScore = 0;
var scoreLabel = Titanium.UI.createLabel({
top : 10,
left : 10,
height : 20,
width : 'auto',
color : 'white',
text : 'Score: ' + totalScore
});
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);
var tank = quicktigame2d.createSprite({image:'images/tank.png'});
tank.x = (320/2) - (tank.width/2);
tank.y = 480 - tank.height;
var back = quicktigame2d.createSprite({image:'images/back.png'});
back.x = (320/2) - (back.width/2);
back.y = 480 - back.height;
scene.add(back);
scene.add(tank);

6. 簡単そうで意外と難しいキャラクターの画面
配置(1)
画面の横幅の半分を取 画像の横幅の半分だけ
得してその値を画像のX ずらせばOK
に指定した場合

7. 簡単そうで意外と難しいキャラクターの画面
配置(2)
画面の縦幅をそ
のまま自機のY
位置に設定する
とこうなる
画像の縦幅
ずらせばOK

8. ソースコード解説：ゲーム難易度設定
/*
弾道の数、速度や敵の数、移動スピードといったパラメータを変更することでゲームの難易度が変わりそうだが
各スプライトに直接値を設定するとマジックナンバーになりそうなので以下オブジェクトを作成
*/
var gameLevel ={
// MAXALIENS :敵の表示最大数の設定
// MAXBULLETS :弾の最大数
// ALIENSSPEED :敵の移動スピード設定
// BULLETSSPEED:弾の移動スピード設定
easy:{
MAXALIENS :5,
MAXBULLETS :15,
ALIENSSPEED:10,
BULLETSSPEED:15
},
middle:{
MAXALIENS :10,
MAXBULLETS :10,
ALIENSSPEED:15,
BULLETSSPEED:15
},
hard:{
MAXALIENS :10,
MAXBULLETS :10,
ALIENSSPEED:15,
BULLETSSPEED:10
}
};
var selectedLevel = 'easy';

9. ソースコード解説：メイン処理
var aliens = [];
var aliensSpeed = [];
var bullets = [];
var bulletsSpeed = [];
game.addEventListener('onload', function(e) {
for (var i = 0; i < gameLevel[selectedLevel].MAXALIENS; i++) { 敵機となる画像を
aliens[i]= quicktigame2d.createSprite({image:'images/alien1.png'});
aliensSpeed[i] = gameLevel[selectedLevel].ALIENSSPEED; MAXALIENESで設定した数
aliens[i].x = Math.random() * game.screen.width; だけ画面に配置。バラバラに
aliens[i].y = -100;
scene.add(aliens[i]); 配置したいので乱数を活用し
}
for(var j=0;j<gameLevel[selectedLevel].MAXBULLETS;j++){ てる
bullets[j]= quicktigame2d.createSprite({image:'images/bullet.png'});
bullets[j].x = initBulletsPostion();
※弾道も基本的には同じ考え
bullets[j].y = tank.y - (bullets[j].height); です。
bulletsSpeed[j] = gameLevel[selectedLevel].BULLETSSPEED;
scene.add(bullets[j]);
}
game.start();
}); 「enterframe」内に書かれている処理が
game.addEventListener('enterframe', function(e) {
bulletCollidesWithAliens(); 定期的（1/30秒）ごとに呼び出される。
updateAliensPosition();
updateBulletPosition(); ※この場合には後述する3つのサブ処理が
});
実施される
game.addEventListener('touchmove',function(e){
tank.x = e.x;
});
win1.add(game);
win1.add(scoreLabel);
win1.open();

10. ソースコード解説：サブ処理（弾道と敵機配
置）
/*
敵の位置の再計算を行い、非表示にしたいものがあったら画面外に配置させることで結果的に非表示にする
*/
function updateAliensPosition(){
for (var i = 0; i < gameLevel[selectedLevel].MAXALIENS; i++) {
aliens[i].y += aliensSpeed[i] * Math.random();
if(aliens[i].y > 480){
aliens[i].y = -100;
}
}
}
/*
弾の位置の再計算を行い、非表示にしたいものがあったら画面外に配置させることで結果的に非表示にする。
*/
function updateBulletPosition(){
for (var i = 0; i < gameLevel[selectedLevel].MAXBULLETS; i++) {
bullets[i].y -= bulletsSpeed[i];
// 弾が画面外に出た時にはタンクの砲台位置に弾を再設定
if(bullets[i].x < 0 ||bullets[i].x > 320 || bullets[i].y < 0 || bullets[i].y > 480){
bullets[i].x = initBulletsPostion();
bullets[i].y = tank.y - (bullets[i].height);
}
}
}

11. なぜ、敵機や弾道が動いて見えるのか？
実際の処理はこんな感じ
スタート時
スタート時
の位置
1秒後の位置
1秒後

12. ソースコード解説：サブ処理（弾道当たり判
定と弾道初期化）
function bulletCollidesWithAliens(){
for (var i = 0; i < gameLevel[selectedLevel].MAXBULLETS; i++) {
for(var j=0;j<gameLevel[selectedLevel].MAXALIENS;j++){
var flg = bullets[i].collidesWith(aliens[j]);
if(flg){
totalScore +=100;
scoreLabel.text = ('Score:' + totalScore);
aliens[j].y = -100;
//弾道をタンクの位置にセットしなおす
bullets[i].x = initBulletsPostion();
bullets[i].y = tank.y - (bullets[i].height);
}
}
}
}
function initBulletsPostion(){
// 弾道は配列で保持しているけれど、幅はすべて同じなので
// 配列の先頭に格納している弾道の幅を取得した上で
// 弾道を砲台の箇所に位置するように処理
return tank.x + (tank.width/2) -(bullets[0].width/2);
}