JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜

by Toshiyuki Ienaga

Slide 1

Slide 1 text

JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜 2016/3/29 Toshiyuki Ienaga(github.com/ienaga)

Slide 2

Slide 2 text

⾃⼰紹介 ´家永稔之(Ienaga Toshiyuki) ´株式会社ソニックムーブバックエンドエンジニア ´GitHub: ienaga

Slide 3

Slide 3 text

⼀昔前まではゲームといえば？ FLASH

Slide 4

Slide 4 text

JavaScript 現在、ゲームといえば？

Slide 5

Slide 5 text

仲良くすればいい！ JavaScriptとFLASH…

Slide 6

Slide 6 text

作りました。という事で「swf2js」

Slide 7

Slide 7 text

swf2jsの使い⽅ ´Flasher Style ´Frontend Style

Slide 8

Slide 8 text

Flasher Style ´これまでFlashでガリガリ開発されていた⽅ ´既存のSWFを再利⽤したい⽅

Slide 9

Slide 9 text

HTMLに2⾏追加するだけ！ swf2js.load("./sample.swf"); ①headerにswf2js.jsの本体を読み込む。 ②再⽣したいswfのURLを書く

Slide 10

Slide 10 text

サンプル ´ http://ienaga.github.io/swf2js/sample.html?sample/lines.swf ´ http://ienaga.github.io/swf2js/sample.html?sample/yomi.swf ´ サンプル提供：GAMEDESIGN

Slide 11

Slide 11 text

Frontend Style ´CreateJSなどのJS制作経験のある⽅ ´複数⼈での開発をしたい⽅ ´ 例)：アニメーションはSWFで、各種ページの動作はJS ´とにかくJavaScriptで作りたい⽅

Slide 12

Slide 12 text

はじめにRootの作成 /** * @param int width * @param int height * @param int * @param object options ** / var _root = swf2js.createRootMovieClip(240, 240, 30);

Slide 13

Slide 13 text

APIドキュメント ´https://swf2js.wordpress.com/api/

Slide 14

Slide 14 text

外部サーバーからswfを読み込む // rootに空のMovieClipを追加 var model = _root.createMovieClip("model"); // 外部swfを読み込み model.loadMovie("model.swf"); // 座標をセット model.x = 50; model.y = 10;

Slide 15

Slide 15 text

⾃作で描画する // rootに空のMovieClipを追加 var shapes = _root.createMovieClip(”shapes"); // Shapeを追加 var shape = shapes.createShape(); // ランダムに⾊を設定 var hue = 360 * Math.random(); var color = "hsl(" + hue + ", 100%, 50%)"; // ランダムに円を描画 shape.graphics .beginFill(color) .drawCircle(0, 0, Math.floor(20 * Math.random()));