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
94
JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜
ienaga
0
1.1k
RedisPlugin
ienaga
0
160
Resurrection Flasher swf2js
ienaga
0
5.1k
Other Decks in Programming
See All in Programming
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
VS Code Update for GitHub Copilot
74th
1
470
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
CursorはMCPを使った方が良いぞ
taigakono
1
190
Create a website using Spatial Web
akkeylab
0
310
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
XP, Testing and ninja testing
m_seki
3
220
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Making Projects Easy
brettharned
116
6.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Practical Orchestrator
shlominoach
188
11k
Code Review Best Practice
trishagee
68
18k
Optimizing for Happiness
mojombo
379
70k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Docker and Python
trallard
44
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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); } });
ご清聴ありがとうございました。