「swf2js」ではじめるゲーム制作

【#TechBuzz】4/22 第23回HTML5+JS勉強会 in 代々木
API: https://swf2js.wordpress.com/api/

Transcript

1. 「swf2js」ではじめるゲーム制作 2016/04/22 Ienaga Toshiyuki
2. 自己紹介 •家永稔之(Ienaga Toshiyuki) •株式会社ソニックムーブ •システムエンジニア •GitHub: ienaga
3. アジェンダ •swf2jsって？ •簡単なAPI紹介 •チーム開発例 •ミニゲームを作ってみる
4. swf2jsって？ JavaScript製FlashPlayerです
5. swf2jsって？ •ActionScript 1.0, 2.0に対応 •ActionScriptがないSWFならどの バージョンでも対応
6. swf2jsって？ •Flasher Style •Frontend Style
7. swf2jsって？ - Flasher Style •これまでFlashでガリガリ開発され ていた方 •既存のswfを再利用したい方
8. swf2jsって？ - Flasher Style
9. swf2jsって？ - Frontend Style •CreateJSのようにコンテンツを自 作したい方 •複数人での開発をしたい方(アニ メーションはSWFで、各種ページ の動作はJS実装) •とにかくJavaScriptで作りたい方
10. swf2jsって？ - Frontend Style
11. 簡単なAPI紹介 •Stage(_root) •MovieClip •Sprite •Button •Text •Shape
12. 簡単なAPI紹介 – Stage(_root) • Canvasのサイズとフレームレートを設定 var _root = swf2js.createRootMovieClip(240, 240, 60);
13. 簡単なAPI紹介 - MovieClip • swfや画像を外部から読み込む事が可能です。 var movieClip = _root.createMovieClip(); movieClip.loadMovie("sample.swf");
14. 簡単なAPI紹介 - Sprite • MovieClip同様にMovieClip、Sprite、 Button、Text、Shapeを子要素として追加 できる、シンプルなコンテナ機能です。 var sprite = movieClip.createSprite(); var movieClip = sprite.createMovieClip(); var button = sprite.createButton(); var text = sprite.createText(); var shape = sprite.createShape();
15. 簡単なAPI紹介 - Button • upState[通常時], • overState[マウスボタンの上にある時] • downState[クリック時] • hitState[当たり判定] • 4つの要素かなるボタン機能です。 • 各StateはSpriteで構成されています。
16. 簡単なAPI紹介 - Button var button = movieClip.createButton(); // 当たり判定 var hitState = button.hitState; // 通常時 var upState = button.upState; // マウスボタンの上にある時 var overState = button.overState; // クリック時 var downState = button.downState;
17. 簡単なAPI紹介 - Text • テキスト入力、フォントなど文字に特化した 機能です。 var textField = movieClip.createText("text", 90, 15); // 表示するテキストをセット textField.text = "テストテキスト"; // テキストの色をセット textField.textColor = "red"; // typeをinputにするとテキスト入力が可能 textField.type = "input";
18. 簡単なAPI紹介 - Shape • 四角形、円、直線、曲線などの描画機能です。 var shape = movieClip.createShape(); // 半径30の円を描画 shape.graphics .beginFill("red") .drawCircle(0, 0, 30);
19. 簡単なAPI紹介 • その他のAPIはこちらから https://swf2js.wordpress.com/api/
20. チーム開発例 • キャラクターやアイテムなどはイラストレー ターがSWFで作成 • 各種ページの実装はJavaScriptで実装
21. チーム開発例 – イメージ図 イラストレーター エンジニア
22. ミニゲームを作ってみる • MovieClipを作成する • 外部swfを読み込む • 読み完了時のイベント • 毎フレームのイベント • タッチイベント • ゲームロジック
23. MovieClipを作成する // 背景のMovieClip var bg = _root.createMovieClip("bg"); // キャラクターのMovieClip var monster = _root.createMovieClip("monster");
24. 外部swfを読み込む // 背景のswf bg.loadMovie("swf/bg.swf"); // キャラクターのswf monster.loadMovie("swf/monster.swf");
25. 読み完了時のイベント // 背景の読み込み完了イベント bg.addEventListener("data", function(){ this.scaleX = 70; this.scaleY = 70; }); // キャラクターの読み込み完了イベント monster.addEventListener("data", function(){ this.x = 50; this.y = 160; });
26. 毎フレームのイベント // 背景を毎フレーム移動させる var speed = 10; bg.addEventListener("enterFrame", function(){ this.x -= speed; if (this.x < -558) { this.x = 0; } });
27. タッチイベント(キャラクター) // press イベント monster.addEventListener("press", function (){ this.startDrag(); }); // release イベント monster.addEventListener("release", function (){ this.stopDrag(); });
28. ゲームロジック // ランダム値 var random = function(min, max){ return ((Math.random() * (max - min)) + min)|0; };
29. ゲームロジック var time = 10; var depth = _root.numChildren; // 重ね順 _root.addEventListener("enterFrame", function(){ time--; if (monster.visible && time === 0) { // 次の円を書くまでの時間をセット time = random(5, 20); ...中略 } });
30. ゲームロジック 中略部分-1 // 円の描画 var movieClip = this.createMovieClip("", depth++); // 初期座標 movieClip.x = 480; movieClip.y = random(0, 240); // 円を書く movieClip.graphic .beginFill("red") .drawCircle(0, 0, 20);
31. ゲームロジック 中略部分-2 movieClip.addEventListener("enterFrame", function(){ this.x -= speed; // あたり判定 if (monster.visible && this.hitTest(monster)) { // 当たったら終了 monster.visible = false; _root.removeChild(this); } // フレームの外にでたら消す if (this.x < -15) { _root.removeChild(this); } });
32. ご清聴ありがとうございました。