![<!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>](https://image.slidesharecdn.com/creatorsnight13tech2-150302022448-conversion-gate01/85/Creators-night-13-tech-2-38-320.jpg)
![<!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>](https://image.slidesharecdn.com/creatorsnight13tech2-150302022448-conversion-gate01/85/Creators-night-13-tech-2-39-320.jpg)
Creators'night#13 tech#2今井
- 3. ゲーム作りたいです。
- 4. 前回のおさらい
- 7. ってことで 今回こそ再開
- 8. と思ったら
- 9. 挑発行為が。
- 11. M⃝riさん
- 13. んだとう…？
- 16. NAVERだとう…？
- 17. これか？
- 18. いや、それはコニー
- 19. ∼ The road to a game developer 番外編∼ 「collieにも浮気してみた」 ネットプライスドットコム NPLab. いまい大すけ
- 20. CREATEJS A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.
- 21. enchant.jsとの比較
- 22. サイズ 88.17KB 47.23KB 計92.08KB （53.79KB） 描画 divごと （canvasラッパー無） divごと （2.0でcanvasに） canvas上 メインループ タイムベース （インターバル手動） タイムベース （自動） タイムベース （手動） ブラウザ対応 自分でやれ ある程度 （IEは無視） 自分でやれ
- 23. とりあえず作ってみるといえば
- 25. クマちゃん in the sky http://jsdo.it/hine.gdw/ySJu （はい、前回もつかいましたね）
- 26. ってことで作りました。
- 28. ※注）前回
- 30. エンちゃん in the sky http://jsdo.it/hine.gdw/znc4
- 32. 感想
- 38. <!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>
- 39. <!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>
- 40. <!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>
- 43. 【結論】 とりあえず、使わない。
- 44. ご清聴 ありがとうございました。