サンプルプログラム

Processing.js Test に貼り付けて試してみてください

  • オープニング画面→メイン画面→エンディング画面 といった画面の遷移例
int state = 1;
int maincount = 0;

void setup() {
  size(300, 300);//最初にかならずサイズを設定する
  stroke(0);
  fill(0);
  textFont(createFont("Arial",24));
  frameRate(20);
}
void draw(){
  background(200);
  if (state == 1){
    fill(200,0,0);
    text("オープニング画面", 50,50);
    fill(100);
    maincount++;
    if (maincount % 20 < 12){ //20で割った余りが12未満
      text("クリックするとスタートするよ", 10,150);
    }
  } else if (state == 2){
    fill(0,200,0);
    text("メイン画面", 80,50);
    maincount++;
    if (maincount>200) {
      state = 3;
      maincount = 0; //reset count
    }
    fill(100);
    text((200-maincount)+" が0になるとゲームオーバー", 10,150);
  } else if (state == 3){
    fill(0,0,200);
    text("ゲームオーバー", 50,50);
    fill(100);
    text("クリックすると最初に戻るよ", 10,150);
  }
}

void mousePressed(){
  if (state == 2) return; //メイン画面のときはクリックしても遷移しない
  state++;
  maincount = 0; //reset
  if (state == 4) state = 1;
}
  • ボタンの配置と,その中をクリックしたらURLにジャンプ(画面遷移にも使える)
    • ボタン上にマウスカーソルがのっているか?クリックされているか?も変数で管理.
      • もちろん,位置とサイズ,ボタンのラベルも.
    • 画面に表現すべき状態はボタンデータが変数で持っておき,マウスイベントが発生したときにそれを更新する
    • あとは,定期的にシステムの元締めから呼ばれる画面表示(draw)の関数内で,Buttonデータに「自分の描画は自分でしてください」と処理を投げる.
    • このように,データに処理(関数)を付加した定義(class Button)を「クラス」と呼ぶ.
    • Buttonクラスに基づきnewで作成した実際のボタンデータ(b1,b2)のことを「クラスのインスタンス」と呼ぶ.
class Button {
  int x,y;
  String label;
  int fontsize;

  int inRect; //マウスカーソルが内部にあるとき = 1
  int isPress; //マウスボタンを押した時 = 1
  int twidth;
  int width, height;
  PFont font;
  Button(int _x, int _y, String _label, int _fontsize){
    x = _x; y = _y;
    label = _label;
    fontsize = _fontsize;
    font = createFont("Arial",fontsize);
    textFont(font);
    twidth = textWidth(label);
    width = twidth*1.3;
    height = fontsize*1.3;
    inRect = 0;
  }

  void draw(){
    fill(240-inRect*100,240-isPress*200,inRect*200);
    rect(x,y,width,height);
    fill(100,100,0);
    textFont(font);
    text(label,x+twidth*0.15,y+fontsize);
  }
  
  boolean checkinRect(int px, int py){
    inRect = 0;
    if (x <= px && px <= (x+width)) {
      if (y <= py && py <= (y+height)){
        inRect = 1;
        return true;
      }
    }
    return false;
  }
  void checkinClick(int px, int py, boolean press){
    if (checkinRect(px,py)==true){
      if (press) {
        isPress = 1;
      } else {
        isPress = 0;
        doClick();
      }
    } else {
      isPress = 0;
      inRect = 0;
    }
  }
  void doClick(){
    link("http://ist.mns.kyutech.ac.jp/");
  }
}

Button b1, b2;

void setup() {
  size(300, 300);//最初にかならずサイズを設定する
  stroke(0);
  fill(0);
  textFont(createFont("Arial",24));
  frameRate(20);
  
  //ボタンの作成は1回のみ,x=20,y=30の位置に,フォントサイズ24
  b1 = new Button(20,30,"ボタンをClickすると",24);

  //ボタンの作成は1回のみ,x=30,y=90の位置に,フォントサイズ20
  b2 = new Button(30,90,"指定URLに飛びます",20);
  
}
void draw(){
  background(200);
  b1.checkinRect(mouseX, mouseY);
  b1.draw();

  b2.checkinRect(mouseX, mouseY);
  b2.draw();
}

void mousePressed(){
  b1.checkinClick(mouseX, mouseY, true);
  b2.checkinClick(mouseX, mouseY, true);
}
void mouseReleased(){
  b1.checkinClick(mouseX, mouseY, false);
  b2.checkinClick(mouseX, mouseY, false);
}
  • ほか,リクエストがあればできるだけ答えます!!
Last modified: 2012-12-07 Attached files total: 1MB