간단한 애니메이션!Pixi.js 만져봐!(5) 상호작용 도전!(버튼편)~

안녕히 주무세요.오늘은 춘분이다.

오늘의 Doodle 이미지입니다.
벌써 봄이구나!나는 원기왕성하게 가고 싶다...
...바깥바람이 세다.불쾌한 날씨.예전과 같이 춥다!
모처럼 쉬는 날이지만 나가기 싫어서 피 씨.나는 계속해서 js를 하고 싶다.

pixi.js 공식 사이트
Pixi.js는 자바스크립트로 애니메이션을 간단하게 만들 수 있는 프로그램 라이브러리입니다.
Pixi.js의 샘플과 문서를 주시하면서 조금씩 공부를 하고 있습니다.
지난번까지 나는 마침내 문자와 그림을 이동할 수 있게 되었는데 이번에는 사용자 조작에 대한 반응에 도전하고 싶다.

단추를 만들어 볼게요.

대화식으로 말하자면 처음에는 버튼(버튼)이다.(그래? w)
금방 간단한 걸로 할게요.
(5시간 경과)
...가시는 길이 순조롭길 빕니다!드디어 다 했어...
나는 단지 지난번에 만든 견본품에 버튼을 눌렀을 뿐이다.
간단한 코드라도 고장나면 반하겠지...
그래서 낮부터 썼을 텐데 벌써 밤이 다 됐어요.

이거 쉽지 않아요.

방법

대체로 다음과 같다.

버튼 이미지 준비(샘플 제작 샘플)

버튼 하나만 만드는 사이다

사이다 버튼 설정

버튼을 눌렀을 때의 동작을 만듭니다

그럼 순서대로 봅시다.

버튼 이미지 만들기

모처럼 사이다를 기억하고 있으니 정말 쓰고 싶다!
그래서 나는 노동력과 재료를 절약하는 버튼을 만들어 보았다.

이번에는'안 건드렸을 때','마우스가 앉아 있을 때','눌렀을 때'.
의 3가지.
스마트폰을 대상으로 제작하면'마우스가 떴다'고 판정할 수 없기 때문에 2종도 가능하다.
또 아날로그 느낌으로 클릭을 표현하려면 더 많은 장수를 늘릴 수 있다.
제이슨은 ↓ 이런 느낌.

{"frames":{
  "button_normal.png":
  {
    "frame": {"x":0,"y":0,"w":240,"h":80},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":240,"h":80},
    "sourceSize": {"w":240,"h":80}
  },
  "button_hover.png":
  {
    "frame": {"x":0,"y":80,"w":240,"h":80},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":240,"h":80},
    "sourceSize": {"w":240,"h":80}
  },
  "button_clicked.png":
  {
    "frame": {"x":0,"y":160,"w":240,"h":80},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":240,"h":80},
    "sourceSize": {"w":240,"h":80}
  }
},
"meta": {
  "image": "button.png",
  "format": "RGBA8888",
  "size": {"w":240,"h":240},
  "scale": "1"
}
}

버튼 제작용 사이다

이번에는 단추 하나만 설정합니다.
한 버튼의 동작은 사이다를 준비해 마우스의 움직임에 따라 여러 개(이번에는 3개)의 무늬를 붙여서 이루어진다.
그럼 버튼용 사이다를 만들자.

loader2 = new PIXI.AssetLoader(["img/button.json"]);
loader2.onComplete = onButtonLoaded; // 読み込みは非同期で行われます
loader2.load(); // ロード開始!

우선 PIXI.AssetLoader()로 사이다 조각을 만드는 적재기를 사용한다.
호출 함수onButtonLoaded()에 지정하여 로드를 시작합니다.
여기까지는 세번째에서 나타난 절차와 같다.
다음은 onButtonLoaded()입니다.

// ボタンの読み込み
var button;
var texNomal;
var texHover;
var texClicked;

function onButtonLoaded(){
  button = PIXI.Sprite.fromFrame("button_normal.png");
  button.position.x = width / 2;
  button.position.y = height / 2;
  button.anchor.x = 0.5;
  button.anchor.y = 0.5;

  texNomal = PIXI.Texture.fromFrame("button_normal.png");
  texHover = PIXI.Texture.fromFrame("button_hover.png");
  texClicked = PIXI.Texture.fromFrame("button_clicked.png");
  :

여기에 사이다를 생성하고 좌표를 설정합니다.
그리고 세 가지 교체된 무늬를 생성한다.

버튼에 스프라이트 설정

onButtonLoaded()의 계속.

  // カスタムプロパティ
  button.isOver = false;    // true: マウスが乗ってる false: 乗ってない

  // ボタン状態初期化
  button.buttonMode = true;
  button.setInteractive(true);

여기에 익숙하지 않은 코드들이 나타날 것이다.
전반전의 코드는 사이다 대상에게 자신의 속성을 추가했다.button.isOver 마우스가 버튼을 눌렀는지 안 눌렀는지 판단하기 위해서다.button.buttonMode에서 true를 설정하면 커서가 손바닥 커서로 바뀝니다.
꼭 필요한 건 아니지만 외관이 바뀌어 버튼이 더 쉽게 인식되므로 설정하는 게 좋다.
다음button.setInteractive(true)은 매우 중요합니다. 이것을 설정하지 않으면sprite는 단추가 되지 않습니다.
마우스 이벤트를 설정하여 활성화해야 합니다.

버튼을 누를 때 적절한 작업 생성

나머지는 마우스 이벤트 처리입니다.

button.mouseover 버튼에 마우스가 겹쳤을 때 발행되는 이벤트

button.mouseover 마우스 단추가 꺼져 있을 때 발생하는 이벤트

button.click는 버튼을 눌렀을 때 발행되는 이벤트

button.tap 버튼을 누를 때 발생하는 이벤트

.
이 활동 처리 프로그램에 대응하는 처리를 쓰십시오.
액션 영화지만 손에 쓴 건 계기밖에 없다.실제 동작 섹션은 애니메이션 처리 방법으로 작성됩니다.

  // mouseover / mouseout
  button.mouseover = function(data){
    this.isOver = true;
    this.setTexture(texHover);
  }
  button.mouseout = function(data){
    this.isOver = false;
    this.setTexture(texNomal);
  }
  // click / tap
  button.click = function(data){
    this.setTexture(texClicked);
    // 
    // ここでアクションを書こう!
    // 
  }
  button.tap = function(data){
    this.setTexture(texClicked);
  }

  stage.addChild(button);

  // 次のアニメーションフレームでanimate()を呼び出してもらう
  requestAnimFrame(animate);
}

버튼이기 때문에'눌렀을 때의 동작'은 button.click에 써야 하지만 반드시 이렇게 해야 하는 것은 아니다.
예상치 못한 다양한 UI를 고려하는 것도 흥미롭다고 생각한다.
마지막에 무대 위에서 사이다를 등록하고.
호출requestAnimFrame(animate),onButtonLoaded() 종료.

동작의 후속은 애니메이션 처리 중

물론 버튼을 눌렀을 때 애니메이션의 동작은 requestAnimFrame()에서 호출된 호출 패키지로 만들어졌다.
샘플은 이번에도 작업량을 줄이고 재료를 줄여 간단명료하게 써 보았다ボタン押されたら速回しをする！. 나는 이것이 참고 가치가 없다고 생각해서 동작 자체의 해설을 생략했다.

다음에도 계속 소통하겠습니다.

미안합니다.시간 다 됐습니다.처음에 Doodle이라고 해서 어쩔 수 없이 w를 했어요.
이번에는 버튼이 왠지 너무 오래 걸려서 목표물에 쓰지 못했다.네.
따라서 다음에도 계속 소통할 예정이다.자세한 건 자면서 w.
그럼 다음에도 잘 부탁드립니다!