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
89
JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜
ienaga
0
920
RedisPlugin
ienaga
0
150
Resurrection Flasher swf2js
ienaga
0
5k
Other Decks in Programming
See All in Programming
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
980
Ruby製社内ツールのGo移行
bgpat
2
260
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3k
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
500
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
1.7k
Building a Smaller App Binary
kateinoigakukun
2
200
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.4k
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
210
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
950
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Design by the Numbers
sachag
274
18k
We Have a Design System, Now What?
morganepeng
42
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Designing for humans not robots
tammielis
247
25k
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); } });
ご清聴ありがとうございました。