2021年11月30日星期二

week08-疫苗認證老人

今天介紹了gether town

https://openprocessing.org/sketch/911326

第一堂課要做一個可以走路的2D腳色

可以去google搜尋animated sprites找到2D腳色，並下載

再來讓他走路

程式碼:

2021年11月29日星期一

大家部落格都不一樣

今天是在做自己的作業

一開始上課的時候老師就開始講解教室同學的問題

我一開始定的題目是彈力球打板的遊戲

但老師說不要太常見的

我覺得這個遊戲應該網路上很多資料

所以我在想要不要把遊戲改成類似彈幕遊戲

但基本架構不太清楚可能要上課的時候詢問老師一下作法

在最後一節課有問老師

詳細過程下課再自己研究

08160741_week08

期末規劃

簡單2D卷軸操作得分小遊戲

1.主要內容

操控一名角色並利用鍵盤的空白鍵進行跳躍，操控的角色會不停地往前進無法停下來，並同時計算玩家所移動的距離，並以最後移動的距離作為結算的分數

2.關卡設計

採以可移動的平面和會掉落的落穴作為地圖構成，每次遊玩的地圖構成都是隨機生成的，而隨著玩家的移動距離增長，玩家本身的移動速度會跟著增加，就意味著遊戲的難度會提升，藉以挑戰玩家所能達到的極限距離

而地圖上也會充斥著不同的道具(有好有壞)，玩家操作的角色碰觸到後會有不同的效果影響，以此增加遊戲的趣味性

橘貓(互動技術筆記_week08)

Processing-8bit 人物走動

本日程式碼重點:

image(img.get(0,0,141,211),0,0);//針對特定區域截圖
image(img.get(190*a,0,190,252),0,0);
a = (a+1)%4;//有4個動作
if(frameCount%30==0)a = (a+1)%4;//1秒有60影格，設定%30在一秒內移動2次.
void keyPressed(){//按鍵按壓的函式
if(keyCode==DOWN){b=0;y++;}//指定按鍵

期末作品構思-Timberman

遊戲流程:

限時內把樹砍倒
需躲過樹枝
每砍掉一段木頭就可以得分!

1.讀圖檔

PImage img;//宣告圖

void setup(){

size(500,500);

img=loadImage("img.jpg");//讀取圖片

}

void draw(){

background(0);

image(img,0,0);}

圖1

2.裁切

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");}

void draw(){

background(255);

image(img.get(0,0,141,211),0,0);//針對特定區域截圖

}

圖2

3.踏出第一步

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");//讀取圖片

}

int a=0;

void draw(){

background(255);

image(img.get(190*a,0,190,252),0,0);

a = (a+1)%4;//有4個動作

}

圖3(!!!發現跑的太快了!!!)

4.調整移動速度

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");//讀取圖片

}

int a=0;

void draw(){

background(255);

image(img.get(190*a,0,190,252),0,0);

if(frameCount%30==0)a = (a+1)%4;//1秒有60影格，設定%30在一秒內移動2次

}

圖4(控制好速度)

5.控制方向

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");//讀取圖片

imageMode(CENTER);

}

int a=0,b=0,x=250,y=250;//設定b變數調整方向

void draw(){

background(255);

image(img.get(141*a,211*b,141,211),x,y);

if(frameCount%30==0)a = (a+1)%4;//1秒有60影格，設定%30在一秒內移動2次

}

void keyPressed(){

if(keyCode==DOWN){b=0;y++;}

if(keyCode==UP){b=1;y--;}

if(keyCode==LEFT){b=2;x--;}

if(keyCode==RIGHT){b=3;x++;}

}

圖5(出現會自動走動的人物了!)

WEEK8期末規劃

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");

imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; }

if(keyCode==LEFT) { b=2; x--; }

if(keyCode==UP) { b=1; y--; }

if(keyCode==DOWN){ b=0; y++; }

}

期末作品想做2D平台遊戲，向瑪莉歐那樣

(☞ﾟヮﾟ)☞ Week10

✨Week10✨

OPEN Processing--人物走動

網址:https://openprocessing.org/sketch/911326

💻程式碼

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");//讀圖

imageMode(CENTER); //置中

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);//切割圖片

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; }//第b格的圖片右轉

if(keyCode==LEFT) { b=2; x--; }//左轉

if(keyCode==UP) { b=1; y--; }//向上

if(keyCode==DOWN){ b=0; y++; }//向下

}

🐧期末規劃

flappy bird

示意圖

Youtube影片

https://www.youtube.com/watch?v=fQoJZuBwrkU

手繪圖

自製sprite

week 10

讓小人移動腳步

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");

imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; }

if(keyCode==LEFT) { b=2; x--; }

if(keyCode==UP) { b=1; y--; }

if(keyCode==DOWN){ b=0; y++; }

}

岩壁悲歌 Week08

2021/11/29期末規劃

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

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");

imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; }

if(keyCode==LEFT) { b=2; x--; }

if(keyCode==UP) { b=1; y--; }

if(keyCode==DOWN){ b=0; y++; }

}

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

float [] hole;

float x=100,y=200,vy=2,bgx=-200;

void setup(){

size(400,600);

hole = new float[10];

for(int i=0;i<10;i++) hole[i]=random(100,300);

}

void draw(){

bgx++;

background(255);

for(int i=0;i<10;i++){

rect(i*100-bgx,0,50,hole[i]);

rect(i*100-bgx,hole[i]+100,50,1000);

}

ellipse(x,y,50,50);

y+=vy;

if(keyPressed&&key==' ')vy=-2;

else vy=2;

}

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

float []badX;

void setup(){

size(600,400);

badX = new float[100];

badX[0]=300+random(200,300);

for(int i=1;i<100;i++){

badX[i]=badX[i-1]+random(200,250);

}

float userY=300,vy=0,bgX=0;

void draw(){

background(#FF0A7D);

fill(#F5ADCF);

for(int i=0;i<100;i++){

triangle(badX[i]-bgX,300,badX[i]-25-bgX,350,badX[i]+25-bgX,350);

}

fill(#AD0051); rect(0,350,600,400);

rect(150,userY,50,50);

if(jumping){

userY+=vy;

vy+=0.98/2;

if(userY>300){

jumping=false;

userY=300;

}

bgX+=3;

}

boolean jumping=false;

void keyPressed(){

if(jumping==false){

jumping=true;

vy=-10;

}

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

void setup(){

size(600,300,P3D);

camera(0,-60,100,0,0,0,0,1,0);

}

void draw(){

lights();

background(112,146,190);

fill(34,177,76);

box(100,2,200);

fill(255,0,0);

box(100,30,2);

fill(255,255,0);

pushMatrix();

translate(mouseX,-30,-mouseY);

noStroke(); sphere(5);

popMatrix();

}

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

float x=300,y=150,vx=-0.7,vy=0;

float bombX=500,bombY=100,bombVX=-2,bombVY=0.3;

void setup(){

size(600,300);

}

boolean gameOver=false;

void draw(){

if(gameOver){

background(255,0,0); return;

}

background(#3351F2);

ellipse(x,y,50,15);

ellipse(bombX,bombY,5,5);

x+=vx; y+=vy;

bombX+=bombVX; bombY+=bombVY;

if(dist(x,y,bombX,bombY)<15) gameOver=true;

}

鴨力山大week08

製作會動的小人~~

程式碼如下

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");

imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; }

if(keyCode==LEFT) { b=2; x--; }

if(keyCode==UP) { b=1; y--; }

if(keyCode==DOWN){ b=0; y++; }

}

記得要去下載圖片~

week08

一.

程式碼:

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");

imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; }

if(keyCode==LEFT) { b=2; x--; }

if(keyCode==UP) { b=1; y--; }

if(keyCode==DOWN){ b=0; y++; }

}

讓小人可以走路

期末作品規劃

貓狗大戰的小遊戲

遊戲畫面

遊戲內容:

雙人對戰，兩個角色在對面互相丟武器給予對方造成傷害，血條先歸零者為輸

物件:兩個角色、不同角色有不同的武器與道具、角色的血條、背景

忘了吃午餐

老師介紹了gether town
https://openprocessing.org/sketch/911326

💡今天要做一個可以走路的2D腳色💡

💬可以在google搜尋 animated sprites 找到2D的腳色走路之類的東西

🅐到上面網址登錄並下載圖片

week08課程

期末作品想法

1.小人移動

Step1：讀入圖檔

PImage img;

void setup(){

size(500,500);

img=loadImage("child.jpg");//讀取圖片

}

void draw(){

background(0);

image(img,0,0);

}

Step2：擷取圖片部分區塊

PImage img;

void setup(){

size(500,500);

img=loadImage("child.jpg");//讀取圖片

}

void draw(){

background(255);

//image(img,0,0);

image(img.get(0,0,141,211),0,0);//針對特定區域截圖

}

Step3：人物初步移動

PImage img;

void setup(){

size(500,500);

img=loadImage("child.jpg");//讀取圖片

}

int a=0;

void draw(){

background(255);

//image(img,0,0);

image(img.get(190*a,0,190,252),0,0);

a = (a+1)%4;//有4個動作

}

Step4：調整移動速度

PImage img;

void setup(){

size(500,500);

img=loadImage("child.jpg");//讀取圖片

}

int a=0;

void draw(){

background(255);

//image(img,0,0);

image(img.get(190*a,0,190,252),0,0);

if(frameCount%30==0)a = (a+1)%4;//1秒有60frame，設定%30在一秒內移動2次

}

Step5：移動方向

PImage img;

void setup(){

size(500,500);

img=loadImage("child.jpg");//讀取圖片

imageMode(CENTER);

}

int a=0,b=0,x=250,y=250;//設定b變數調整方向

void draw(){

background(255);

//image(img,0,0);

image(img.get(141*a,211*b,141,211),x,y);

if(frameCount%30==0)a = (a+1)%4;1秒有60frame，設定%30在一秒內移動2次

}

void keyPressed(){

if(keyCode==DOWN){b=0;y++;}

if(keyCode==UP){b=1;y--;}

if(keyCode==LEFT){b=2;x--;}

if(keyCode==RIGHT){b=3;x++;}

}

天文社社員招募中week10

期末作品規劃

1.老師示範Gather Town小小人走路(有給網址

https://openprocessing.org/sketch/911326

老師的程式如下:

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg");

imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; }

if(keyCode==LEFT) { b=2; x--; }

if(keyCode==UP) { b=1; y--; }

if(keyCode==DOWN){ b=0; y++; }

}

2.用老師的程式在processing看小小人走路

程式如下:

PImage img;

void setup(){

size(500,500);

img=loadImage("img.jpg"); ///有圖片

imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

background(255);

//image( img, 0,0);

image( img.get(141*a, 211*b, 141,211), x,y);

if(frameCount%30==0) a = (a+1)%4;

}

void keyPressed(){

if(keyCode==RIGHT){ b=3; x++; } ///b是圖片位置

if(keyCode==LEFT) { b=2; x--; }

if(keyCode==UP) { b=1; y--; }

if(keyCode==DOWN){ b=0; y++; }

}

3.期末作品開始規劃囉!

目標:俄羅斯方塊!!!

4.示意圖

圖片來源:https://openprocessing.org/sketch/313016/

5.YouTube影片示意

https://www.youtube.com/watch?v=zH_omFPqMO4

有人用c++寫出俄羅斯方塊

6.自己畫的示意圖

說明:

就是俄羅斯方塊

🍮加油加油🍩

week06

1 直接用text()寫出Hello

2 改成text()套在draw()中寫出Hello

3 利用frameCount以60fps刷新計時

4 frameCount/60以符合用秒作為計時單位

另用millis()作為對照，frameCount執行時較慢不準確

5 加入hour() minute() second()用於計時

6 以pFont的pFont.list()查詢現有字體，再以createFont()選擇字型

textFont()使用文字字型

7 物件font1 font2各用一種字型按下畫面可改字型

8 字串hh mm ss分別使用hour() minute() second()

9 將現在時間轉為以秒為單位並與下課時間相減得出剩下時間

10 將剩下時間秒為單位改為時分秒為單位

11 將數字png檔案以陣列讀入並顯示

12 將剩下秒數以數字圖案呈現並調整位置

訂閱：意見 (Atom)

2021年11月30日 星期二

2021年11月29日 星期一

Processing-8bit 人物走動

本日程式碼重點:

1.讀圖檔

2.裁切

3.踏出第一步

4.調整移動速度

5.控制方向

✨Week10✨

OPEN Processing--人物走動

💻程式碼

🐧期末規劃

flappy bird

製作會動的小人~~

老師介紹了gether town https://openprocessing.org/sketch/911326

💡今天要做一個可以走路的2D腳色💡

💬可以在google搜尋 animated sprites 找到2D的腳色走路之類的東西

🅐到上面網址登錄並下載圖片

期末作品想法

1.小人移動

Step1：讀入圖檔

Step2：擷取圖片部分區塊

Step3：人物初步移動

Step4：調整移動速度

Step5：移動方向

期末作品規劃

1.老師示範Gather Town小小人走路(有給網址

https://openprocessing.org/sketch/911326

老師的程式如下:

2.用老師的程式在processing看小小人走路

程式如下:

3.期末作品開始規劃囉!

目標:俄羅斯方塊!!!

目標:俄羅斯方塊!!!

4.示意圖

圖片來源:https://openprocessing.org/sketch/313016/

5.YouTube影片示意

https://www.youtube.com/watch?v=zH_omFPqMO4

6.自己畫的示意圖

說明:

🍮加油加油🍩

2021年11月30日星期二

2021年11月29日星期一

老師介紹了gether town
https://openprocessing.org/sketch/911326