Slide 1
Slide 1 text
「swf2js」ではじめるゲーム制作
2016/04/22
Ienaga Toshiyuki
Slide 2
Slide 2 text
自己紹介
•家永稔之(Ienaga Toshiyuki)
•株式会社ソニックムーブ
•システムエンジニア
•GitHub: ienaga
Slide 3
Slide 3 text
アジェンダ
•swf2jsって？
•簡単なAPI紹介
•チーム開発例
•ミニゲームを作ってみる
Slide 4
Slide 4 text
swf2jsって？
JavaScript製FlashPlayerです
Slide 5
Slide 5 text
swf2jsって？
•ActionScript 1.0, 2.0に対応
•ActionScriptがないSWFならどの
バージョンでも対応
Slide 6
Slide 6 text
swf2jsって？
•Flasher Style
•Frontend Style
Slide 7
Slide 7 text
swf2jsって？ - Flasher Style
•これまでFlashでガリガリ開発され
ていた方
•既存のswfを再利用したい方
Slide 8
Slide 8 text
swf2jsって？ - Flasher Style
Slide 9
Slide 9 text
swf2jsって？ - Frontend Style
•CreateJSのようにコンテンツを自
作したい方
•複数人での開発をしたい方(アニ
メーションはSWFで、各種ページ
の動作はJS実装)
•とにかくJavaScriptで作りたい方
Slide 10
Slide 10 text
swf2jsって？ - Frontend Style
Slide 11
Slide 11 text
簡単なAPI紹介
•Stage(_root)
•MovieClip
•Sprite
•Button
•Text
•Shape
Slide 12
Slide 12 text
簡単なAPI紹介 – Stage(_root)
• Canvasのサイズとフレームレートを設定
var _root = swf2js.createRootMovieClip(240, 240, 60);
Slide 13
Slide 13 text
簡単なAPI紹介 - MovieClip
• swfや画像を外部から読み込む事が可能です。
var movieClip = _root.createMovieClip();
movieClip.loadMovie("sample.swf");
Slide 14
Slide 14 text
簡単な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();
Slide 15
Slide 15 text
簡単なAPI紹介 - Button
• upState[通常時],
• overState[マウスボタンの上にある時]
• downState[クリック時]
• hitState[当たり判定]
• 4つの要素かなるボタン機能です。
• 各StateはSpriteで構成されています。
Slide 16
Slide 16 text
簡単なAPI紹介 - Button
var button = movieClip.createButton();
// 当たり判定
var hitState = button.hitState;
// 通常時
var upState = button.upState;
// マウスボタンの上にある時
var overState = button.overState;
// クリック時
var downState = button.downState;
Slide 17
Slide 17 text
簡単なAPI紹介 - Text
• テキスト入力、フォントなど文字に特化した
機能です。
var textField = movieClip.createText("text", 90, 15);
// 表示するテキストをセット
textField.text = "テストテキスト";
// テキストの色をセット
textField.textColor = "red";
// typeをinputにするとテキスト入力が可能
textField.type = "input";
Slide 18
Slide 18 text
簡単なAPI紹介 - Shape
• 四角形、円、直線、曲線などの描画機能です。
var shape = movieClip.createShape();
// 半径30の円を描画
shape.graphics
.beginFill("red")
.drawCircle(0, 0, 30);
Slide 19
Slide 19 text
簡単なAPI紹介
• その他のAPIはこちらから
https://swf2js.wordpress.com/api/
Slide 20
Slide 20 text
チーム開発例
• キャラクターやアイテムなどはイラストレー
ターがSWFで作成
• 各種ページの実装はJavaScriptで実装
Slide 21
Slide 21 text
チーム開発例 – イメージ図
イラストレーター エンジニア
Slide 22
Slide 22 text
ミニゲームを作ってみる
• MovieClipを作成する
• 外部swfを読み込む
• 読み完了時のイベント
• 毎フレームのイベント
• タッチイベント
• ゲームロジック
Slide 23
Slide 23 text
MovieClipを作成する
// 背景のMovieClip
var bg = _root.createMovieClip("bg");
// キャラクターのMovieClip
var monster = _root.createMovieClip("monster");
Slide 24
Slide 24 text
外部swfを読み込む
// 背景のswf
bg.loadMovie("swf/bg.swf");
// キャラクターのswf
monster.loadMovie("swf/monster.swf");
Slide 25
Slide 25 text
読み完了時のイベント
// 背景の読み込み完了イベント
bg.addEventListener("data", function(){
this.scaleX = 70;
this.scaleY = 70;
});
// キャラクターの読み込み完了イベント
monster.addEventListener("data", function(){
this.x = 50;
this.y = 160;
});
Slide 26
Slide 26 text
毎フレームのイベント
// 背景を毎フレーム移動させる
var speed = 10;
bg.addEventListener("enterFrame", function(){
this.x -= speed;
if (this.x < -558) {
this.x = 0;
}
});
Slide 27
Slide 27 text
タッチイベント(キャラクター)
// press イベント
monster.addEventListener("press", function (){
this.startDrag();
});
// release イベント
monster.addEventListener("release", function (){
this.stopDrag();
});
Slide 28
Slide 28 text
ゲームロジック
// ランダム値
var random = function(min, max){
return ((Math.random() * (max - min)) + min)|0;
};
Slide 29
Slide 29 text
ゲームロジック
var time = 10;
var depth = _root.numChildren; // 重ね順
_root.addEventListener("enterFrame", function(){
time--;
if (monster.visible && time === 0) {
// 次の円を書くまでの時間をセット
time = random(5, 20);
...中略
}
});
Slide 30
Slide 30 text
ゲームロジック 中略部分-1
// 円の描画
var movieClip = this.createMovieClip("", depth++);
// 初期座標
movieClip.x = 480;
movieClip.y = random(0, 240);
// 円を書く
movieClip.graphic
.beginFill("red")
.drawCircle(0, 0, 20);
Slide 31
Slide 31 text
ゲームロジック 中略部分-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);
}
});
Slide 32
Slide 32 text
ご清聴ありがとうございました。