TC*(˙Ⱉ˙ฅ)​-week13

 這周來學習如何製作遊戲封面

遊戲封面如果不是使用processing程式碼進行繪製，而是另外有圖要讀檔顯示的話

首先我們要做的第一步就是先存檔

然後將圖片直接丟入processing的程式畫面

接著拖曳到processing的圖片會自動生成一個data資料夾，圖片會在裡面，並且如果data資料夾沒有你要的圖片，到時候寫進程式裡也沒辦法顯示喔!!

好了，準備工作進行到此!!

接下來就是要學習怎麼寫，才能夠讓圖片被讀出來

首先讀圖少不了先設定型態

PImage用於存儲圖像的數據類型，可以顯示處理.gif、.jpg、 .tga和.png圖像

PImage home_img;//就是儲存一個名為home_img的圖像型態

void setup(){

  size(1200,750);//視窗長寬

  home_img = loadImage("home.png");//載入封面圖home.png

}

在設置中，想要讀圖得將在data資料夾的圖片叫出來

那就會需要home_img = loadImage("home.png");來載入封面圖

注意喔~home.png是你放在data資料夾裡面需要載入的圖片名稱與圖片格式

寫錯圖片格式的話，就會讀不出來，要小心~

載入完圖像之後，就是要顯示出來了!!

void draw(){//畫圖

  image(home_img,0,0,1200,750);//home圖片的x,y座標(0,0)，(1200,600)是圖片寬高

}

在draw函式裡面寫出image(home_img,0,0,1200,750);
表示你要如何顯示這張圖片的x,y座標以及圖片的寬高

將這些全部結合起來就會是

PImage home_img,start_img,rule_img;//封面,開始遊戲,規則介紹

void setup(){

  size(1200,750);//視窗長寬

  home_img = loadImage("home.png");//載入封面圖home.png

}

void draw(){//畫圖

  image(home_img,0,0,1200,750);//home圖片的x,y座標(0,0)，(1200,600)是圖片寬高

}

這樣我們就能夠得到一個視窗大小是1200*600的封面啦~有沒有很簡單?

不過這樣看起來似乎有點空?首頁進入遊戲畫面應該會有按紐才對??

沒關係!!這邊依樣畫葫蘆，先將按紐的圖片通通讀進來~

至於按紐怎麼製作，這邊就先賣個關子，等下次再進行教學囉!

小要訣:

1.PImage 圖片變數名稱;

2.void setup()裡載入圖片，圖片變數名稱 = loadImage("圖片名稱.圖片格式");

3.void draw()裡顯示圖片，image(圖片變數名稱,圖片X座標,圖片Y座標,圖片長,圖片寬);

PImage home_img,start_img,rule_img;//封面,開始遊戲,規則介紹

void setup(){

  size(1200,750);//視窗長寬

  home_img = loadImage("home.png");//載入封面圖home.png

  start_img = loadImage("start.png");//載入開始遊戲鍵start.png

  rule_img = loadImage("rule.png");//載入規則介紹鍵rule.png

}

void draw(){//畫圖

  image(home_img,0,0,1200,750);//home圖片的x,y座標(0,0)，(1200,600)是圖片寬高

  image(start_img,1000,600,150,75);//start圖片的x,y座標(650,600)，(110,60)是圖片寬高

  image(rule_img,800,600,150,75);//rule圖片的x,y座標(850,600)，(110,60)是圖片寬高

}

這樣封面就大致上做好了，下周來學習如何製作成按紐吧~