creators'night#13 tech#2今井
TRANSCRIPT
スマホアプリ作るまで続く 長期連載シリーズ
父ちゃん、母ちゃん、 俺、
やっぱゲーム作りたい。
※「俺」も「父ちゃん」も「母ちゃん」も普段使いません。
ゲーム作りたいです。
前回のおさらい
enchant.jsと CreateJSの比較
「あんまかわんねぇや」
次回こそは メインのゲームを進める 多分、CREATEJSで
ってことで 今回こそ再開
と思ったら
挑発行為が。
M◯riさん
collie - 高速アニメーションJSライブラリ
んだとう…？
NAVERだとう…？
これか？
いや、それはコニー
～ The road to a game developer 番外編～
「collieにも浮気してみた」
ネットプライスドットコム NPLab. いまい大すけ
CREATEJS A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.
enchant.jsとの比較
サイズ 88.17KB 47.23KB 計92.08KB （53.79KB）
描画 divごと （canvasラッパー無）
divごと （2.0でcanvasに） canvas上
メインループ タイムベース （インターバル手動）
タイムベース （自動）
タイムベース （手動）
ブラウザ対応 自分でやれ ある程度 （IEは無視） 自分でやれ
とりあえず作ってみるといえば
ってことで作りました。
※注）前回
主人公は引き続き enchant.jsのエンちゃん
全部で4時間くらい ※注）前回も同じくらい
感想
【良い所】 ・単純移動物を記述しやすい ・スプライトのマスクができる
【悪い所】 ・Canvasラッパーない ・ドキュメント不足（韓国語） ・タイマー多様（慣れかなぁ…）
基本的にはCreateJSより enchant.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>
<!DOCTYPE html> <html> <head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8" /> <script type="text/javascript" src="./collie.min.js"></script> <script type="text/javascript"> window.onload = function() { collie.ImageManager.add({ "a" : "ａ.png" }, function () { var layer = new collie.Layer({ width : 320, height : 320 }); var item = new collie.DisplayObject({ x : 10, y : 10, backgroundImage : "a" }).addTo(layer); collie.Renderer.addLayer(layer); collie.Renderer.load(document.getElementById("container")); collie.Renderer.start(); }); }; </script> </head> <body> <div id="container"></div> </body> </html>
CreateJSより少し短いけど enchant.jsより長い
ってか、canvasが いじりづらいのは 致命的だYo!
【結論】 とりあえず、使わない。
ご清聴 ありがとうございました。