Upgrade to Pro — share decks privately, control downloads, hide ads and more …

「swf2js」ではじめるゲーム制作

 「swf2js」ではじめるゲーム制作

【#TechBuzz】4/22 第23回HTML5+JS勉強会 in 代々木
API: https://swf2js.wordpress.com/api/

Toshiyuki Ienaga

April 22, 2016
Tweet

More Decks by Toshiyuki Ienaga

Other Decks in Programming

Transcript

  1. 簡単な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();
  2. 簡単なAPI紹介 - Button • upState[通常時], • overState[マウスボタンの上にある時] • downState[クリック時] •

    hitState[当たり判定] • 4つの要素かなるボタン機能です。 • 各StateはSpriteで構成されています。
  3. 簡単なAPI紹介 - Button var button = movieClip.createButton(); // 当たり判定 var

    hitState = button.hitState; // 通常時 var upState = button.upState; // マウスボタンの上にある時 var overState = button.overState; // クリック時 var downState = button.downState;
  4. 簡単なAPI紹介 - Text • テキスト入力、フォントなど文字に特化した 機能です。 var textField = movieClip.createText("text",

    90, 15); // 表示するテキストをセット textField.text = "テストテキスト"; // テキストの色をセット textField.textColor = "red"; // typeをinputにするとテキスト入力が可能 textField.type = "input";
  5. 読み完了時のイベント // 背景の読み込み完了イベント bg.addEventListener("data", function(){ this.scaleX = 70; this.scaleY =

    70; }); // キャラクターの読み込み完了イベント monster.addEventListener("data", function(){ this.x = 50; this.y = 160; });
  6. タッチイベント(キャラクター) // press イベント monster.addEventListener("press", function (){ this.startDrag(); }); //

    release イベント monster.addEventListener("release", function (){ this.stopDrag(); });
  7. ゲームロジック var time = 10; var depth = _root.numChildren; //

    重ね順 _root.addEventListener("enterFrame", function(){ time--; if (monster.visible && time === 0) { // 次の円を書くまでの時間をセット time = random(5, 20); ...中略 } });
  8. ゲームロジック 中略部分-1 // 円の描画 var movieClip = this.createMovieClip("", depth++); //

    初期座標 movieClip.x = 480; movieClip.y = random(0, 240); // 円を書く movieClip.graphic .beginFill("red") .drawCircle(0, 0, 20);
  9. ゲームロジック 中略部分-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); } });