Your SlideShare is downloading. ×
2012 03-03-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-03-titanium plusquicktigame2d

761
views

Published on


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

No Downloads
Views
Total Views
761
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
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. 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 「舞台」のような位置づけ。 「俳優」のような位置づけ。「監督」のような位置づけで 例えばステージ1は誰でもクリ 画像を表示する機能はもちろんゲームの進行管理を担う アーできる程度の敵を配置する のこと、画像の変形、移動とい・弾道と敵が当たった時のアク だけにしておき、ステージ2は う処理はもちろんのこと、画像ションを決定する 少し難易度をあげる・・・とい 同士が重なってるかどうか簡単・ゲームのスコアー管理をする うようなゲームにしようとした に判別出来たりするので、ゲー・何面まで進んだのか管理する 場合にこの「舞台」を切り替え ム開発者が面倒な処理を考えて ることで簡単に実現可能 なくても済む
  • 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);}