スマホアプリ作るまで続く
長期連載シリーズ
父ちゃん、母ちゃん、
俺、
やっぱゲーム作りたい。
※「俺」も「父ちゃん」も「母ちゃん」も普段使いません。
ゲーム作りたいです。
今回こそ再開
久々にコード見たら…
var deleteMode = false;
var lineNumber = lines.length;
var scoreUp = 0;
if (lineNumber >=2) {
deleteMode = true;
if (lineNumber == 2) {
// 2つしかつながってない場合は減点
scoreUp = -50;
} else {
// 3つ以上つながっている場合の特典ルール
scoreUp = 100 + (((tileVariation * 10) * (lines.length - 3)) * (lines.length - 3));
}
// 得点のポップアップは最後に選択されたタイルの近くに出る
var popTileX = lines[lineNumber - 1].boardX * TILE_SIZE + BOARD_OFFSETX;
var popTileY = lines[lineNumber - 1].boardY * TILE_SIZE + BOARD_OFFSETY;
var popTile = new PopTile(popTileX, popTileY, markedNumber, this);
popTile.key = game.frame;
popTiles[game.frame] = popTile;
effectGroup.addChild(popTile);
var popScoreX = (lines[lineNumber - 1].boardX + 1 / 2) * TILE_SIZE + BOARD_OFFSETX;
var popScoreY = (lines[lineNumber - 1].boardY + 1 / 2) * TILE_SIZE + BOARD_OFFSETY;
var popScore = new PopScore(popScoreX, popScoreY, scoreUp, this);
popScore.key = game.frame;
popScores[game.frame] = popScore;
effectGroup.addChild(popScore.numberSprite);
stageScore += scoreUp;
barValues[markedNumber] += lineNumber;
}
lineMode = false;
for(var i in lines) {
if (deleteMode === true) {
boardData[lines[i].boardY][lines[i].boardX] = 0;
}
markedData[lines[i].boardY][lines[i].boardX] = 0;
lineGroup.removeChild(lines[i]);
lines[i].remove();
}
lines = [];
}
}
});
// ライン
var lines = [];
var Line = enchant.Class.create(enchant.Sprite, {
initialize: function(boardX, boardY, recentBoardX, recentBoardY, lineNumber) {
this.boardX = boardX;
this.boardY = boardY;
this.lineNumber = lineNumber;
enchant.Sprite.call(this, LINE_SIZE, LINE_SIZE);
this.image = game.assets['images/lines.png'];
if (lineNumber === 0) {
this.frame = 0;
this.x = boardX * TILE_SIZE + ((TILE_SIZE - LINE_SIZE) / 2) + BOARD_OFFSETX;
全く思い出せん…
リハビリが必要だ
で、ネットで見ちゃったですよ。
CREATEJS
Adobeとか
Microsoftとかが
スポンサーしてるんだって。
∼ The road to a game developer 番外編∼
「CREATEJSに浮気してみた」
ネットプライスドットコム
NPLab. いまい大すけ
CREATEJS
A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.
EaselJS
TweenJS
SoundJS
PreloadJS
の4つのライブラリ
EaselJS
Canvas描画ライブラリ
TweenJS
アニメーションライブラリ
SoundJS
音関連のライブラリ
PreloadJS
素材のプリローダー
enchant.jsとの比較
サイズ 47.23KB
計92.08KB
(53.79KB)
描画
divごと
(2.0でcanvasに)
canvas上
メインループ
タイムベース
(自動)
タイムベース
(手動)
ブラウザ対応
ある程度
(IEは無視)
自分でやれ
とりあえず作ってみるといえば
クマちゃん in the sky
http://jsdo.it/hine.gdw/ySJu
ゲームプログラム初心者に
1日で作ってもらう課題として
enchantで昔作ったゲーム。
ゲームの内容は
「バルーントリップ」
的なもの
ってことで作りました。
主人公はenchant.jsの
エンちゃん
エンちゃん in the sky
http://jsdo.it/hine.gdw/hUUB
全部で4時間くらい
感想
【良い所】
アニメーション使いやすい
結構速い
Canvas関連使いやすい
【悪い所】
・Canvas拡縮ない(と思う)
・オブジェクトのwidth、height
等のメンバー変数がない!
・描画オブジェクトのクリック操
作とか困難
【enchantの良い所】
・スプライトの当たり判定
・mapオブジェクト
・タッチイベントに標準で対応
・プラグイン
・画像素材が提供されている
でも、
基本的にJSなので、
方言レベルの差しかない。
Spriteを表示するまでの
最低限の記述
<!DOCTYPE	
  html>	
  
<html>	
  
<head>	
  
	
  	
  	
  	
  <meta	
  http-­‐equiv="Content-­‐Type"	
  content="text/html;	
  charset=UTF-­‐8"	
  />	
  
	
  	
  	
  	
  <script	
  type="text/javascript"	
  src="./enchant.js"></script>	
  
	
  	
  	
  	
  <script	
  type="text/javascript">	
  
	
  	
  	
  	
  	
  	
  	
  	
  enchant();	
  
	
  	
  	
  	
  	
  	
  	
  	
  window.onload	
  =	
  function()	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  var	
  game	
  =	
  new	
  Game(320,320);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  game.preload('a.png');	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  game.onload	
  =	
  function()	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  var	
  test	
  =	
  new	
  Sprite(100,100);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  test.x	
  =	
  10;	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  test.y	
  =	
  10;	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  test.image	
  =	
  game.assets['a.png'];	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  game.rootScene.addChild(test);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  };	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  game.start();	
  
	
  	
  	
  	
  	
  	
  	
  	
  };	
  
	
  	
  	
  	
  </script>	
  
</head>	
  
<body>	
  
</body>	
  
</html>
<!DOCTYPE	
  html>	
  
<html>	
  
<head>	
  
	
  	
  	
  	
  <meta	
  http-­‐equiv="Content-­‐Type"	
  content="text/html;	
  charset=UTF-­‐8"	
  />	
  
	
  	
  	
  	
  <script	
  type="text/javascript"	
  src="./easel.js"></script>	
  
	
  	
  	
  	
  <script	
  type="text/javascript">	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  canvas,	
  stage;	
  
	
  	
  	
  	
  	
  	
  	
  	
  function	
  init()	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  canvas	
  =	
  document.get.ElementById(“testCanvas”);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  stage	
  =	
  new	
  createjs.Stage(canvas);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  img	
  =	
  new	
  Image(canvas);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  img.src	
  =	
  “a.png”;	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  img.onload	
  =	
  function()	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  var	
  ss	
  =	
  new	
  createjs.SpriteSheet({	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  images:	
  [img],	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  frames:	
  {width:100,	
  height:100,	
  regX:0,	
  regY:0},	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  animations:	
  {stand:	
  [0]}	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  });	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  var	
  test	
  =	
  new	
  createjs.BitmapAnimation(ss);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  test.x	
  =	
  10;	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  test.y	
  =	
  10;	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  test.gotoAndPlay(“stand”);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  stage.addChild(test);	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  stage.update();	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  };	
  
	
  	
  	
  	
  	
  	
  	
  	
  };	
  
	
  	
  	
  	
  </script>	
  
</head>	
  
<body	
  onload="init();"	
  >	
  
	
  	
  	
  	
  <canvas	
  id="testCanvas"	
  width=”320”	
  height=”320”></canvas>	
  
</body>	
  
</html>
CreateJSの方が
ちょっと長い
【その他】
・Flash CS6から書き出し可
・日本語ドキュメントなし
・まだ本も出てないみたい
enchant.jsで
便利だと思う機能を
パクって実装しちゃえば
いいと思うんだ。
次回こそは
メインのゲームを進める
多分、CREATEJSで
ご清聴
ありがとうございました。

Creators'night#12今井