QuickTiGame2dとは？✤ TitaniumMobile向けの2Dゲーム開発のためのフレームワーク

✤ 札幌に住んでる井口さんという方が開発中

2011年12月28日 2012年1月8日

スマフォ向けゲーム開発ツール

開発ツール 開発言語 特徴

Titanium Mobile+QuickTiGame2d JavaScript iPhone/Android向けのアプ

リがリリース出来る

enchant.js JavaScript ブラウザ上で稼働するWebアプリケーション

ngCore JavaScript DeNAが開発してる

Unity JavaScriptUnity Technologies社が開発しており、GREEがこの会

社と提携してる

QuickTiGame2dの主な機能

「監督」のような位置づけで ゲームの進行管理を担う・弾道と敵が当たった時のアクションを決定する・ゲームのスコアー管理をする・何面まで進んだのか管理する

「舞台」のような位置づけ。例えばステージ１は誰でもクリアーできる程度の敵を配置するだけにしておき、ステージ２は少し難易度をあげる・・・というようなゲームにしようとした場合にこの「舞台」を切り替えることで簡単に実現可能

「俳優」のような位置づけ。画像を表示する機能はもちろんのこと、画像の変形、移動という処理はもちろんのこと、画像同士が重なってるかどうか簡単に判別出来たりするので、ゲーム開発者が面倒な処理を考えてなくても済む

John Krolljcarbaugh Daves Portfolio

実際の画面ではこのように配置されます

GameView Scene Sprite

Windowオブジェクト

ScoreTitanium.UI.Label

ソースコード解説：初期設定

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);

簡単そうで意外と難しいキャラクターの画面配置(1)

画面の横幅の半分を取得してその値を画像のXに指定した場合

画像の横幅の半分だけずらせばOK

簡単そうで意外と難しいキャラクターの画面配置(2)

画面の縦幅をそのまま自機のY位置に設定するとこうなる 画像の縦幅

ずらせばOK

/* 弾道の数、速度や敵の数、移動スピードといったパラメータを変更することでゲームの難易度が変わりそうだが 各スプライトに直接値を設定するとマジックナンバーになりそうなので以下オブジェクトを作成 */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';

ソースコード解説：ゲーム難易度設定

ソースコード解説：メイン処理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; 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();});game.addEventListener('enterframe', function(e) { bulletCollidesWithAliens(); updateAliensPosition(); updateBulletPosition();});

game.addEventListener('touchmove',function(e){ tank.x = e.x;});win1.add(game);win1.add(scoreLabel);win1.open();

「enterframe」内に書かれている処理が定期的（1/30秒）ごとに呼び出される。※この場合には後述する3つのサブ処理が実施される

敵機となる画像をMAXALIENESで設定した数だけ画面に配置。バラバラに配置したいので乱数を活用してる※弾道も基本的には同じ考えです。

ソースコード解説：サブ処理（弾道と敵機配置）/* 敵の位置の再計算を行い、非表示にしたいものがあったら画面外に配置させることで結果的に非表示にする */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); } }}

なぜ、敵機や弾道が動いて見えるのか？

スタート時の位置

1秒後の位置

実際の処理はこんな感じスタート時

1秒後

ソースコード解説：サブ処理（弾道当たり判定と弾道初期化）

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);}