p5js로 Pokémon GO 같은 UI 만들기 (3)

세 번째입니다. 이번에는 버튼을 만들어 봅시다. 우선 정렬도 아무것도 생각하지 않고 circle()로 써 봅시다.

function draw() {
  background(0);

  rotateX(1)

  // 地図を描く
  push();
  texture(img);
  plane(1000, 1000);
  pop();

  // 箱人間を描く
  drawBoxman();

  // ボタンを描く
  fill(64,64,64,128);
  circle(0,0,100);

}

이런 느낌으로 쓴 원이 이쪽. 지도의 면에 붙어 있네요.



그래서 rotate(-1)로 면을 되돌려 보겠습니다.

  rotateX(-1);
  fill(64,64,64,128);
  circle(0,50,100);

그러자, 오야오야 버튼은 정면을 향하고 있는 것 같습니다만, 지도에 망설이고 있어요.



그래서 버튼을 그리는 면을 translate로 놓고 여기에 버튼을 그리기로 합니다.

  rotateX(-1);
  translate(0,0,300);

  noStroke();

  fill(255,0,0,128);
  circle(-40,120,20);
  fill("white");
  text("A",-40,120);

지도에서 얼마나 말할 것인가, 어느 위치에 버튼을 두는지는 「적당」입니다. . .



다음 번에는 버튼을 누르면 뭔가 액션이 일어나도록 합시다.