Pixi.jsでつくるスワイプスタイルのクイズアプリ[その2]

前回に引き続きクイズアプリを作っていきます。

前回タイトル画面を作成したので、今回ゲーム内の画面を作っていきます。
イメージしている画面と処理フローは下記のような感じです。

####画面構成
前回、横長でタイトル画面を作成しましたが、やはりスマホで遊ぶことを前提にしたので、
縦長にしました。一旦500x800で作成。

↓画面

####処理フロー
非常に一般的な処理フローかなと思います。
↓処理フロー

####Code it.
まだ模索中なので、随時タッチイベントの処理は変えるかもしれません。

####画面の切り替え(?)
本来ならばちゃんとシーンを切り替えようの実装をしたほうがよいが、PIXIでのシーン切り替えのベストメソッドがわからないかつ
そんなにシーンが切り替わる仕様ではないので、切り替えの瞬間はオブジェクトを全削除して、同じstage?で再配置するようにしました。

removeAll（？）とかいう関数があったがなぜか動かないので、今のところはいったんループ回して対応。

    function destroySceneObjects() {
      //要素全削除　removeChildrenAllとかつかえないポイ。
      for (var i = app.stage.children.length - 1; i >= 0; i--) {
        app.stage.removeChildAt(i);
      }
    }

タイトルクリック時の処理

    button
      .on('click', function () {
        //alert('button clicked');
        //一旦部品をすべて除去
        destroySceneObjects();
        gameScene();
      })

gameSceneにメイン画面で使うスプライトたちをいれこんでいく。今日はまず金の斧(=QuestionImage)を配置してみる。

    function gameScene() {
      console.log("すたーと");
      setQuestionImage(container);
    }

####メイン画面におくスプライトたち
今回は金の斧のイメージのみおく。

    function setQuestionImage(container) {

      var quiz_texture = PIXI.Texture.from('img/quiz_img.png');
      var questionImage = new PIXI.Sprite(quiz_texture);
      questionImage.anchor.x = 0.5;
      questionImage.anchor.y = 0.5;
      //配置は直感できめている。
      questionImage.position.x = app.screen.width / 2 - questionImage.width / 2;
      questionImage.position.y = 300 + questionImage.height / 2;
      touchQuestionImage(questionImage);
      app.stage.addChild(questionImage);
    }

タッチイベントたち

    function touchQuestionImage(questionImage) {
      questionImage.interactive = true;
      questionImage.buttonMode = true;

      questionImage
        .on('mousedown', onDragStart)
        .on('touchstart', onDragStart)
        // ドロップ（ドラッグを終了）
        .on('mouseup', onDragEnd)
        .on('mouseupoutside', onDragEnd)
        .on('touchend', onDragEnd)
        .on('touchendoutside', onDragEnd)
        // ドラッグ中
        .on('mousemove', onDragMove)
        .on('touchmove', onDragMove)

      function onDragStart(event) {
        this.data = event.data
        this.alpha = 0.5
        this.dragging = true
      }
      function onDragEnd() {
        this.alpha = 1
        this.dragging = false
        // set the interaction data to null
        this.data = null

        // 判定
        if (this.position.x > 280) { alert("〇の方向"); nextQuestion();}
        if (this.position.x < 180) { alert("×の方向"); nextQuestion();}
      }
      function onDragMove() {
        if (this.dragging) {
          var newPosition = this.data.getLocalPosition(this.parent)
          this.position.x = newPosition.x
          this.position.y = newPosition.y
        }
      }
      function onButtonOver() {
        this.isOver = true;
        if (this.isdown) {
          return;
        }
        this.texture = textureButtonOver;
      }
    }