Embed Size (px)
Citation preview
スマホアプリ作るまで続く 長期連載シリーズ
父ちゃん、母ちゃん、 俺、
やっぱゲーム作りたい。
※「俺」も「父ちゃん」も「母ちゃん」も普段使いません。
ゲーム作りたいです。
今回こそ再開
久々にコード見たら…
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; this.y = boardY * TILE_SIZE + ((TILE_SIZE - LINE_SIZE) / 2) + BOARD_OFFSETY;
全く思い出せん…
リハビリが必要だ
で、ネットで見ちゃったですよ。
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で
ご清聴 ありがとうございました。
