Pixi.js로 만드는 스 와이프 스타일의 퀴즈 앱 [2 부]

전회에 계속해서 퀴즈 앱을 만들어 갑니다.

전회 타이틀 화면을 작성했으므로, 이번 게임내의 화면을 만들어 갑니다.
이미지하고 있는 화면과 처리 흐름은 아래와 같은 느낌입니다.

화면 구성

전회, 가로로 타이틀 화면을 작성했습니다만, 역시 스마트폰으로 놀 것을 전제로 했으므로,
세로로 했습니다. 일단 500x800으로 작성.

↓화면

처리 흐름

매우 일반적인 처리 흐름이라고 생각합니다.
↓ 처리 흐름

코드 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;
      }
    }