Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「swf2js」ではじめるゲーム制作
Search
Toshiyuki Ienaga
April 22, 2016
Programming
0
4.6k
「swf2js」ではじめるゲーム制作
【#TechBuzz】4/22 第23回HTML5+JS勉強会 in 代々木
API:
https://swf2js.wordpress.com/api/
Toshiyuki Ienaga
April 22, 2016
Tweet
Share
More Decks by Toshiyuki Ienaga
See All by Toshiyuki Ienaga
AWS Auto Scaling
ienaga
0
90
JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜
ienaga
0
950
RedisPlugin
ienaga
0
150
Resurrection Flasher swf2js
ienaga
0
5k
Other Decks in Programming
See All in Programming
JS RPCを理解する
yusukebe
5
260
freeeのエンジニアが 就活で出そうな コーディングテストを 解説してみる
freee
1
160
FoodGram
iseruuuuu
0
230
RaaP
ksss
0
150
RubyGems on ruby.wasm
kateinoigakukun
0
110
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
哲学史とモデリング
tanakahisateru
2
420
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
170
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
120
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
125
8.6k
Six Lessons from altMBA
skipperchong
22
3k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Happy Clients
brianwarren
92
6.4k
KATA
mclloyd
16
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Optimizing for Happiness
mojombo
370
69k
Writing Fast Ruby
sferik
622
60k
The Mythical Team-Month
searls
217
42k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Transcript
「swf2js」ではじめるゲーム制作 2016/04/22 Ienaga Toshiyuki
自己紹介 •家永稔之(Ienaga Toshiyuki) •株式会社ソニックムーブ •システムエンジニア •GitHub: ienaga
アジェンダ •swf2jsって? •簡単なAPI紹介 •チーム開発例 •ミニゲームを作ってみる
swf2jsって? JavaScript製FlashPlayerです
swf2jsって? •ActionScript 1.0, 2.0に対応 •ActionScriptがないSWFならどの バージョンでも対応
swf2jsって? •Flasher Style •Frontend Style
swf2jsって? - Flasher Style •これまでFlashでガリガリ開発され ていた方 •既存のswfを再利用したい方
swf2jsって? - Flasher Style
swf2jsって? - Frontend Style •CreateJSのようにコンテンツを自 作したい方 •複数人での開発をしたい方(アニ メーションはSWFで、各種ページ の動作はJS実装) •とにかくJavaScriptで作りたい方
swf2jsって? - Frontend Style
簡単なAPI紹介 •Stage(_root) •MovieClip •Sprite •Button •Text •Shape
簡単なAPI紹介 – Stage(_root) • Canvasのサイズとフレームレートを設定 var _root = swf2js.createRootMovieClip(240, 240,
60);
簡単なAPI紹介 - MovieClip • swfや画像を外部から読み込む事が可能です。 var movieClip = _root.createMovieClip(); movieClip.loadMovie("sample.swf");
簡単な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();
簡単なAPI紹介 - Button • upState[通常時], • overState[マウスボタンの上にある時] • downState[クリック時] •
hitState[当たり判定] • 4つの要素かなるボタン機能です。 • 各StateはSpriteで構成されています。
簡単なAPI紹介 - Button var button = movieClip.createButton(); // 当たり判定 var
hitState = button.hitState; // 通常時 var upState = button.upState; // マウスボタンの上にある時 var overState = button.overState; // クリック時 var downState = button.downState;
簡単なAPI紹介 - Text • テキスト入力、フォントなど文字に特化した 機能です。 var textField = movieClip.createText("text",
90, 15); // 表示するテキストをセット textField.text = "テストテキスト"; // テキストの色をセット textField.textColor = "red"; // typeをinputにするとテキスト入力が可能 textField.type = "input";
簡単なAPI紹介 - Shape • 四角形、円、直線、曲線などの描画機能です。 var shape = movieClip.createShape(); //
半径30の円を描画 shape.graphics .beginFill("red") .drawCircle(0, 0, 30);
簡単なAPI紹介 • その他のAPIはこちらから https://swf2js.wordpress.com/api/
チーム開発例 • キャラクターやアイテムなどはイラストレー ターがSWFで作成 • 各種ページの実装はJavaScriptで実装
チーム開発例 – イメージ図 イラストレーター エンジニア
ミニゲームを作ってみる • MovieClipを作成する • 外部swfを読み込む • 読み完了時のイベント • 毎フレームのイベント •
タッチイベント • ゲームロジック
MovieClipを作成する // 背景のMovieClip var bg = _root.createMovieClip("bg"); // キャラクターのMovieClip var
monster = _root.createMovieClip("monster");
外部swfを読み込む // 背景のswf bg.loadMovie("swf/bg.swf"); // キャラクターのswf monster.loadMovie("swf/monster.swf");
読み完了時のイベント // 背景の読み込み完了イベント bg.addEventListener("data", function(){ this.scaleX = 70; this.scaleY =
70; }); // キャラクターの読み込み完了イベント monster.addEventListener("data", function(){ this.x = 50; this.y = 160; });
毎フレームのイベント // 背景を毎フレーム移動させる var speed = 10; bg.addEventListener("enterFrame", function(){ this.x
-= speed; if (this.x < -558) { this.x = 0; } });
タッチイベント(キャラクター) // press イベント monster.addEventListener("press", function (){ this.startDrag(); }); //
release イベント monster.addEventListener("release", function (){ this.stopDrag(); });
ゲームロジック // ランダム値 var random = function(min, max){ return ((Math.random()
* (max - min)) + min)|0; };
ゲームロジック var time = 10; var depth = _root.numChildren; //
重ね順 _root.addEventListener("enterFrame", function(){ time--; if (monster.visible && time === 0) { // 次の円を書くまでの時間をセット time = random(5, 20); ...中略 } });
ゲームロジック 中略部分-1 // 円の描画 var movieClip = this.createMovieClip("", depth++); //
初期座標 movieClip.x = 480; movieClip.y = random(0, 240); // 円を書く movieClip.graphic .beginFill("red") .drawCircle(0, 0, 20);
ゲームロジック 中略部分-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); } });
ご清聴ありがとうございました。