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.7k
「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
95
JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜
ienaga
0
1.1k
RedisPlugin
ienaga
0
160
Resurrection Flasher swf2js
ienaga
0
5.2k
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
PipeCDのプラグイン化で目指すところ
warashi
1
270
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Hack Claude Code with Claude Code
choplin
3
890
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
320
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
790
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
GraphRAGの仕組みまるわかり
tosuri13
8
530
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
It's Worth the Effort
3n
185
28k
Done Done
chrislema
184
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
42k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
KATA
mclloyd
30
14k
Embracing the Ebb and Flow
colly
86
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
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); } });
ご清聴ありがとうございました。