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
96
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
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
AIでLINEスタンプを作ってみた
eycjur
1
230
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
rage against annotate_predecessor
junk0612
0
170
速いWebフレームワークを作る
yusukebe
5
1.7k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
RDoc meets YARD
okuramasafumi
4
170
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Thoughts on Productivity
jonyablonski
70
4.8k
Embracing the Ebb and Flow
colly
87
4.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building an army of robots
kneath
306
46k
Producing Creativity
orderedlist
PRO
347
40k
Code Review Best Practice
trishagee
71
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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); } });
ご清聴ありがとうございました。