Hello World_Week15

20200605 程設會考練習&OpenProcessing&Sprite圖片

今天老師一樣先複習了程設會考的題目 還有考試

再來介紹了OpenProcessing!

這個網站可以讓我們把P語言的程式碼放在網頁上

還可以直接跑結果出來看!

一開始我們要先註冊帳號

註冊完就會有自己的頁面

只要按下Create a Sketch就能建立自己的程式

按下去之後就會出現底下這個畫面

左邊可以打自己的程式

但一開始預設會是P5js

我們要改成右邊的Processingjs

這樣就可以用我們平常在Processing打的程式了!

再來就是這次新教的Sprite!

Sprite就是底下這種樣子的圖片

一張圖片包含了人物的各個方向跟動作

首先 我們先打一段把圖片放進去的程式

打完要記得按右上角的Save 這樣程式才會儲存!

PImage img;
void setup()
{
size(500,500);
img=loadImage("img.jpg");
}
void draw()
{
background(255);
image(img,0,0);
}

--------------------------------------------------------------------------------------------------------------------------

再來按下Save底下的3個點點

這樣就會出現剛剛的黑色區域

再按下Files就可以把圖片拉進去了

然後按下頁面上方中間的三角形播放鍵 就可以看到結果了!

再來 因為這個圖片的大小為564*844

然後有4列4行

所以一個人物的一個動作大小為141*211

我們先放一個動作上來

PImage img;
void setup()
{
size(500,500);
img=loadImage("img.jpg");
}
void draw()
{
background(255);
image(img.get(0,0,141,211),0,0);//img.get(x1,y1,x2,y2) 顯示出(x1,y1)到(x2,y2)的圖片
}

--------------------------------------------------------------------------------------------------------------------------

再來 換個動作(第1列第2個動作)

PImage img;
void setup()
{
size(500,500);
img=loadImage("img.jpg");
}
void draw()
{
background(255);
image(img.get(141,0,141,211),0,0);//img.get(x1,y1,x2,y2) 顯示出(x1,y1)到(x2,y2)的圖片
}

--------------------------------------------------------------------------------------------------------------------------

再來我們要用鍵盤控制人物

每按一次鍵盤就讓人物走一步

(因為每個人物及動作的大小和距離都相等 所以可以用乘的來改變動作)

PImage img;
void setup()
{
size(500,500);
img=loadImage("img.jpg");
}
void draw()
{
background(255);
image(img.get(141*a,211*b,141,211),0,0);//img.get(x1,y1,x2,y2) 顯示出(x1,y1)到(x2,y2)的圖片
}
int a=0;
void keyPressed()
{
a++;//換下一個動作
if(a>=4) a=0;//因為一列有4個動作，所以如果超過就從第1個開始
}

--------------------------------------------------------------------------------------------------------------------------

最後要讓人物可以有其他方向的動作

PImage img;
void setup()
{
size(500,500);
img=loadImage("img.jpg");
}
void draw()
{
background(255);
image(img.get(141*a,211*b,141,211),0,0);//img.get(x1,y1,x2,y2) 顯示出(x1,y1)到(x2,y2)的圖片
}
int a=0,b=0;
void keyPressed()
{
if(keyCode==RIGHT) b=3;//按向右鍵就做第四列的(b=3 人物面向右邊)
if(keyCode==LEFT) b=2;//按向左鍵就做第三列的(b=2 人物面向左邊)
if(keyCode==UP) b=1;//按向上鍵就做第二列的(b=1 人物面向上面)
if(keyCode==DOWN) b=0;//按向下鍵就做第一列的(b=0 人物面向下面)
a++;//換下一個動作
if(a>=4) a=0;//因為一列有4個動作，所以如果超過就從第1個開始
}

--------------------------------------------------------------------------------------------------------------------------

心得

今天教了新的東西，叫做Sprite!一張圖片就可以變出不同方向的各個動作，真的很神奇!然後老師今天介紹的新網站OpenProcessing也很方便，直接在網頁上面就能顯示程式的結果，也可以上傳圖片，這樣就不用擔心程式碼跟圖片不見了!想要用的時候也隨時都能從網頁上找來用!