トーフメモ

主にゲーム制作

ボタンとシーン遷移の実装【Processing】

f:id:tofgame:20190718174908p:plain
ボタンを押して別シーンに遷移する処理を作ります!

実装の流れ

ボタンを作る

マウスがボタンに重なると色が変わり、またクリック後に別シーンにうつるようなものを作ります。

シーンを作り、ボタンを押すと別シーンにうつるようにする

シーン用に変数を用意してシーン用変数が特定の値の時に特定のシーンの処理を実行する、という感じです。
これはswitch文などを使うとわりと簡単に実装できます。
ボタンに用意した関数を使ってシーンを切り替えます。

ボタンを作る

class Button {
  float x, y;
  float sizeX, sizeY;
  int state;

  color baseCol;
  float nb;
  float sb;
  float pb;

  String str;

  Button(float x, float y, float sizeX, float sizeY, color baseCol, String str) {
    this.x=x;
    this.y=y;
    this.sizeX=sizeX;
    this.sizeY=sizeY;
    this.baseCol=baseCol;
    this.str=str;

    nb=1; //normalBrightness
    sb=0.8; //selectBrightness
    pb=0.6; //pushBrightness
  }

  void run() {
    rogic();
    display();
  }

  void display() {
    noStroke();
    changeColor();
    rect(x, y, sizeX, sizeY);

    fill(0, 0, 100);
    textSize(30);
    text(str, x, y);
  }

  void rogic() {
    state=checkState();
  }

  //===================================================================
  boolean isPush() {
    if (checkState()==2) return true;
    return false;
  }

  int checkState() {
    if (!checkInMouse()) return 0;
    if (!mousePressed) return 1;
    return 2;
  }

  boolean checkInMouse() {
    if (mouseX>x-sizeX/2&&mouseX<x+sizeX/2) {
      if (mouseY>y-sizeY/2&&mouseY<y+sizeY/2) {
        return true;
      }
    }
    return false;
  }

  void changeColor() {
    switch(state) {
    case 0:
      fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*nb);
      break;

    case 1:
      fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*sb);
      break;

    case 2:
      fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*pb);
      break;

    default:
      fill(0, 0, 0);
      break;
    }
  }
}

シーンを作る

Button button;

int scene=0;

void setup() {
  size(600, 600);
  rectMode(CENTER);
  colorMode(HSB, 360, 100, 100);
  textAlign(CENTER, CENTER);

  button=new Button(width/2, height/2, 200, 100, color(190, 100, 70), "PUSH!");
}

void draw() {
  background(0, 0, 100);
  fill(0, 0, 0);
  text("scene "+scene, width/2, height/4);

  switch(scene) {
  case 0:
    button.run();

    if (button.isPush()) {
      scene=1;
    }
    break;
  case 1:

    break;
  }
}

実行すると・・・

youtu.be

こんな感じです!