2024互動技術: 第八章

1.week08_1_int_page_if_page_0_1

1-1. 找一張圖片，並命名為「640x480.png」

PImage img;

void setup() {
size(640, 480);
img = loadImage("640x480.png");
}
int page = 0; //0:開場畫面、1:第1關、2:第2關
void draw() {
if (page == 0) {
background(0);
textSize(70);
textAlign(CENTER, CENTER); //文字置中
text("Opening", 320, 240);
}
else if (page == 1) {
background(img); //圖檔大小要與size()相同，才能變成背景
}
}
void mousePressed() {
if (page == 0) page = 1;
}

2. week08_2_RPG_background_640_480_32_32_rect_32_32

2-1. 將剛剛 week08-1 的檔案另存新檔(因為裡面有存圖片)

PImage img;

void setup() {

size(640, 480);

//15格 = 480，480/15 = 32，方格長32

img = loadImage("640x480.png");

}

void draw() {

background(img);

for (int i = 0; i < 15; i++) { //高度480 對應y座標(左手i)

for (int j =0; j < 20; j++) { //寬度640 對應x座標(右手j)

noFill(); //不用填色

rect(j*32, i*32, 32, 32); //小格子大小是 32*32

}

3. week08_3_RPG_PImage_createImgae_copy_save

3-1. 將剛剛 week08-2 的檔案另存新檔(因為裡面有存圖片)

PImage img;

void setup() {

size(640, 480);

//15格 = 480，480/15 = 32，方格長32

img = loadImage("640x480.png");

}

void draw() {

background(img);

for (int i = 0; i < 15; i++) { //高度480 對應y座標(左手i)

for (int j =0; j < 20; j++) { //寬度640 對應x座標(右手j)

noFill(); //不用填色

stroke(0); //黑色的線

rect(j*32, i*32, 32, 32); //小格子大小是 32*32

}

stroke(255, 0, 0); //紅色的線

rect(J*32, I*32, 32,32);

}

int I = -1, J = -1;

void mouseMoved() { //void Moved()移動時，要修改I, J

I = mouseY/32; //小心x

J = mouseX/32; //小心y

}

int N = 1;

void mousePressed(){

//PImage now = createImage(32, 32, RGB);

//now.copy(img, 0, 0, 640, 480);

PImage now = createImage(32, 32, RGB);

now.copy(img, J*32, I*32, 32, 32, 0, 0, 32, 32);

now.save(N + ".png");

N++;

}

3-3. 點選不同的圖形，讓他自行生成一個個不同圖案的小圖檔

4. week08_4_RPG_2d_array_floor_map

int [][] floor = {

{25, 22, 22, 22, 24, 25, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 2, 1, 3, 1, 3, 4, 21, 21, 21, 4, 5, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 21, 1, 6, 1, 4, 4, 4, 21, 21, 21, 4, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 7, 1, 4, 1, 8, 5, 8, 1, 1, 9, 1, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 21, 9, 21, 1, 2, 8, 5, 1, 10, 11, 10, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 7, 1, 21, 1, 1, 1, 1, 1, 21, 10, 5, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 6, 1, 21, 21, 21, 7, 10, 21, 21, 13, 10, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 14, 1, 1, 15, 1, 1, 1, 1, 21, 10, 10, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 5, 16, 1, 15, 1, 21, 21, 21, 11, 17, 5, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 1, 1, 1, 7, 1, 21, 1, 21, 1, 9, 1, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 21, 21, 1, 21, 1, 21, 1,21, 21, 23, 1, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 18, 19, 21, 21, 21, 21, 1, 21, 1, 20, 1, 22, 24},

{25, 22, 22, 22, 24, 25, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 24},

};

PImage img;

PImage []fimg = new PImage[40];

void setup() {

size(640, 480);

//15格 = 480，480/15 = 32，方格長32

img = loadImage("640x480.png");

for(int i = 1; i <= 25; i++) fimg[i] = loadImage(i + ".png");

}

void draw() {

//background(img);

for (int i = 0; i < 15; i++) { //高度480 對應y座標(左手i)

for (int j =0; j < 20; j++) { //寬度640 對應x座標(右手j)

int now = floor[i][j];

image(fimg[now], j*32, i*32);

}

5.week08_5_RPG_user_move_userJ_userI_keyPressed