QuickTiGame2dとは?✤   TitaniumMobile向けの2Dゲーム開発のためのフレームワーク✤   札幌に住んでる井口さんという方が開発中        2011年12月28日          2012年1月8日
スマフォ向けゲーム開発ツール 開発ツール            開発言語                 特徴Titanium Mobile                iPhone/Android向けのアプ                 ...
QuickTiGame2dの主な機能jcarbaugh        John Kroll         Daves Portfolio                   「舞台」のような位置づけ。    「俳優」のような位置づけ。「監督」...
実際の画面ではこのように配置されます  Window オブジェクト           GameView            Scene   Sprite              Score           Titanium.UI.La...
ソースコード解説:初期設定var win1 = Titanium.UI.createWindow({    title:Tab 1,    backgroundColor:#fff});var totalScore = 0;var scoreL...
簡単そうで意外と難しいキャラクターの画面配置(1)画面の横幅の半分を取    画像の横幅の半分だけ得してその値を画像のX     ずらせばOK  に指定した場合
簡単そうで意外と難しいキャラクターの画面配置(2)画面の縦幅をそのまま自機のY位置に設定する とこうなる           画像の縦幅           ずらせばOK
ソースコード解説:ゲーム難易度設定/*     弾道の数、速度や敵の数、移動スピードといったパラメータを変更することでゲームの難易度が変わりそうだが     各スプライトに直接値を設定するとマジックナンバーになりそうなので以下オブジェクトを作成...
ソースコード解説:メイン処理var aliens = [];var aliensSpeed = [];var bullets = [];var bulletsSpeed = [];game.addEventListener(onload, fu...
ソースコード解説:サブ処理(弾道と敵機配置)/*     敵の位置の再計算を行い、非表示にしたいものがあったら画面外に配置させることで結果的に非表示にする  */function updateAliensPosition(){   for (v...
なぜ、敵機や弾道が動いて見えるのか?              実際の処理はこんな感じ                   スタート時      スタート時      の位置  1秒後の位置                   1秒後
ソースコード解説:サブ処理(弾道当たり判定と弾道初期化)function bulletCollidesWithAliens(){  for (var i = 0; i < gameLevel[selectedLevel].MAXBULLETS;...
Upcoming SlideShare
Loading in …5
×

2012 03-03-titanium plusquicktigame2d

875 views
819 views

Published on

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

No Downloads
Views
Total views
875
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2012 03-03-titanium plusquicktigame2d

  1. 1. QuickTiGame2dとは?✤ TitaniumMobile向けの2Dゲーム開発のためのフレームワーク✤ 札幌に住んでる井口さんという方が開発中 2011年12月28日 2012年1月8日
  2. 2. スマフォ向けゲーム開発ツール 開発ツール 開発言語 特徴Titanium Mobile iPhone/Android向けのアプ JavaScript+QuickTiGame2d リがリリース出来る ブラウザ上で稼働するWeb enchant.js JavaScript アプリケーション ngCore JavaScript DeNAが開発してる Unity Technologies社が開 Unity JavaScript 発しており、GREEがこの会 社と提携してる
  3. 3. QuickTiGame2dの主な機能jcarbaugh John Kroll Daves Portfolio 「舞台」のような位置づけ。 「俳優」のような位置づけ。「監督」のような位置づけで 例えばステージ1は誰でもクリ 画像を表示する機能はもちろんゲームの進行管理を担う アーできる程度の敵を配置する のこと、画像の変形、移動とい・弾道と敵が当たった時のアク だけにしておき、ステージ2は う処理はもちろんのこと、画像ションを決定する 少し難易度をあげる・・・とい 同士が重なってるかどうか簡単・ゲームのスコアー管理をする うようなゲームにしようとした に判別出来たりするので、ゲー・何面まで進んだのか管理する 場合にこの「舞台」を切り替え ム開発者が面倒な処理を考えて ることで簡単に実現可能 なくても済む
  4. 4. 実際の画面ではこのように配置されます Window オブジェクト GameView Scene Sprite Score Titanium.UI.Label
  5. 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. 6. 簡単そうで意外と難しいキャラクターの画面配置(1)画面の横幅の半分を取 画像の横幅の半分だけ得してその値を画像のX ずらせばOK に指定した場合
  7. 7. 簡単そうで意外と難しいキャラクターの画面配置(2)画面の縦幅をそのまま自機のY位置に設定する とこうなる 画像の縦幅 ずらせばOK
  8. 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. 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. 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. 11. なぜ、敵機や弾道が動いて見えるのか? 実際の処理はこんな感じ スタート時 スタート時 の位置 1秒後の位置 1秒後
  12. 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);}

×