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
JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜
Search
Toshiyuki Ienaga
March 23, 2016
Technology
0
940
JavaScript2Dゲームエンジン「swf2js」〜swfも使えるよ〜
第63回 HTML5とか勉強会 with html5jゲーム部発足記念合同勉強会資料
Toshiyuki Ienaga
March 23, 2016
Tweet
Share
More Decks by Toshiyuki Ienaga
See All by Toshiyuki Ienaga
AWS Auto Scaling
ienaga
0
89
「swf2js」ではじめるゲーム制作
ienaga
0
4.6k
RedisPlugin
ienaga
0
150
Resurrection Flasher swf2js
ienaga
0
5k
Other Decks in Technology
See All in Technology
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
920
ServiceNow Knowledge Learning Rise up
manarobot
0
210
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
520
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.3k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
660
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
630
本当のAWS基礎
toru_kubota
0
520
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
Featured
See All Featured
Happy Clients
brianwarren
92
6.4k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
GitHub's CSS Performance
jonrohan
1025
450k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Designing for humans not robots
tammielis
248
25k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The Cult of Friendly URLs
andyhume
74
5.7k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Statistics for Hackers
jakevdp
789
220k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Transcript
JavaScript2Dゲームエンジン 「swf2js」 〜swfも使えるよ〜 2016/3/29 Toshiyuki Ienaga(github.com/ienaga)
⾃⼰紹介 ´家永 稔之(Ienaga Toshiyuki) ´株式会社ソニックムーブ バックエンドエンジニア ´GitHub: ienaga
⼀昔前まではゲームといえば? FLASH
JavaScript 現在、ゲームといえば?
仲良くすればいい! JavaScriptとFLASH…
作りました。 という事で「swf2js」
swf2jsの使い⽅ ´Flasher Style ´Frontend Style
Flasher Style ´これまでFlashでガリガリ開発されていた⽅ ´既存のSWFを再利⽤したい⽅
HTMLに2⾏追加するだけ! <html> <head> <script type="text/javascript" src="swf2js.js"></script> </head> <body> <script type="text/javascript">
swf2js.load("./sample.swf"); </script> </body> </html> ①headerにswf2js.jsの本体を読み込む。 ②再⽣したいswfのURLを書く
サンプル ´ http://ienaga.github.io/swf2js/sample.html?sample/lines.swf ´ http://ienaga.github.io/swf2js/sample.html?sample/yomi.swf ´ サンプル提供:GAMEDESIGN
Frontend Style ´CreateJSなどのJS制作経験のある⽅ ´複数⼈での開発をしたい⽅ ´ 例):アニメーションはSWFで、各種ページの動作はJS ´とにかくJavaScriptで作りたい⽅
はじめにRootの作成 /** * @param int width * @param int height
* @param int * @param object options ** / var _root = swf2js.createRootMovieClip(240, 240, 30);
APIドキュメント ´https://swf2js.wordpress.com/api/
外部サーバーからswfを読み込む // rootに空のMovieClipを追加 var model = _root.createMovieClip("model"); // 外部swfを読み込み model.loadMovie("model.swf");
// 座標をセット model.x = 50; model.y = 10;
⾃作で描画する // rootに空のMovieClipを追加 var shapes = _root.createMovieClip(”shapes"); // Shapeを追加 var
shape = shapes.createShape(); // ランダムに⾊を設定 var hue = 360 * Math.random(); var color = "hsl(" + hue + ", 100%, 50%)"; // ランダムに円を描画 shape.graphics .beginFill(color) .drawCircle(0, 0, Math.floor(20 * Math.random()));
サンプル ´http://ienaga.github.io/swf2js/sample4.html
ご清聴ありがとうございました。