使用canvas製作rpg遊戲時遇到的一些問題

2021-10-10 04:10:30 字數 4003 閱讀 4034

canvas載入

canvas新增的方式:

/* drawimage()* /

因為素材的原因所以使用了drawimage方法

遊戲的素材都來自rpgmaker,在steam上可以購買到正版!!

如果我們想取到圖中的乙個方格新增到canvas上就要使用drawimage方法

/***

cont是獲取到的畫筆,

img是你要新增的

0,192 前兩個數字是你想在你所需要的的上開始截圖的位置

48,48 也就是你要截多少截多大

0,0 是你把新增到canvas上的起點座標從哪開始畫

48,48 是在canvas要畫多大多少(是你擷取的在canvas縮放大小)

***/

使用方法是:cont.drawimage(img,0,192,48,48,0,0,48,48);

那麼我們來試一下這個方法

//獲取畫布和畫筆

let canv = document.getelementbyid("canvas");

let cont = canv.getcontext('2d');

//建立乙個物件

let floor1 = new image();

floor1.src = 'img/dungeon_a5.png';

cont.drawimage(floor1, 0, 192, 48, 48, 0, 0, 48, 48);

在寫了這樣的**後並沒有出來

在查詢資料時我了解到:是乙個資源請求,在js載入中,自然有乙個載入的時間,極大可能在未載入時就呼叫了drawimage,所以無法顯示,

解決方法:

1.使用定時器非同步載入:

settimeout(function(),1000)
2.img.onload事件在載入過後在執行drawimage方法進行繪圖

img.onload=function()
完整的**:

//獲取畫布和畫筆

let canv = document.getelementbyid("canvas");

let cont = canv.getcontext('2d');

//建立乙個物件作為開始遊戲的背景

最後的效果就是這樣的

在新增的img上新增文字

素材:

如果說這是我們的進入遊戲的主介面,我們想給這個新增個標題,那麼

//獲取畫布和畫筆

let canv = document.getelementbyid("canvas");

let cont = canv.getcontext('2d');

//建立乙個物件作為開始遊戲的背景

let img = new image();

img.src = 'img/dragon.png';

img.onload=()=>

//標題

cont.beginpath();

cont.font = '80px 楷體';

cont.fillstyle = "black";

cont.filltext('勇者鬥惡龍', 330, 200);

cont.closepath();

這種方法出現了問題,文字並沒有顯示當我們在注釋掉img.onload這段**時發現正常顯示了,那麼這個問題,無論你是使用定時器載入還是.onload載入,他都是乙個非同步**,而非同步**是在同步**之後執行的,所以下面的文字其實是繪製了的,不過他被後面的所遮蓋了

解決方法

方法很簡單只要把文字繪製的**放入img.onload裡面就可以,在載入後在執行繪製和文字

//獲取畫布和畫筆

let canv = document.getelementbyid("canvas");

let cont = canv.getcontext('2d');

//建立乙個物件作為開始遊戲的背景

let img = new image();

img.src = 'img/dragon.png';

img.onload=()=>

效果

和上方小圖的比較

let canv = document.getelementbyid("canvas");

let cont = canv.getcontext('2d');

//建立乙個物件作為開始遊戲的背景

let floor1 = new image();

floor1.src = 'img/dungeon_a5.png';

floor1.οnlοad=function()

//標題

cont.beginpath();

cont.font = '80px 楷體';

cont.fillstyle = "black";

cont.filltext('勇者鬥魔王', 330, 200);

cont.closepath();

結果:

所以可以證明上面的觀點:繪製在繪製文字之後執行的所以要將繪製文字放在非同步**裡。

drawimage的平鋪問題

用上面的一塊小圖製作地板,上面我們擷取的是乙個小方塊,我們玩得rpg遊戲都是由這些小方塊拼成的,那麼我想用這乙個小塊鋪滿背景把他當我的地板讓我的小人可以在上面行走,要怎麼做呢?

這個方法是我在網上學到的:

建立乙個小的canvas,用drawimage將新增到小的canvas上,然後使用createpattern方法把小的canvas平鋪到大的canvas上面

createpatten方法

使用方法:

/***

canv:你要新增的或者元素

repeat:預設,向水平和垂直方向平鋪

***/

context.createpattern(canv,「repeat」);

這個方法和drawimage:

draimage方法可以精確地獲取這個的大小適用於這種素材的提取,但是drawimage卻沒辦法進行平鋪,createpatten可以進行平鋪卻不能適用於這種素材

//獲取畫布和畫筆

let canv = document.getelementbyid("canvas");

let cont = canv.getcontext('2d');

//建立第乙個頁面所需要的的物件

let floor1 = new image();

floor1.src = 'img/dungeon_a5.png';

floor1.onload=()=>

rpg人物製作軟體 RPG遊戲製作教程

專案一 預設素材使用教程 任務認識 rpg與 rpg maker xp 1.rpg 簡述rpg 即角色扮演遊戲 英文全稱 是role playing game 是一種遊戲。在遊戲中,玩 家扮演虛擬世界中的乙個或者幾個特定角色在特定場景下進行遊戲。角色根據不同的遊戲情 節和統計資料 例如力量 靈敏度 ...

Unity製作RPG遊戲 按鍵輸入與處理

對於乙個rpg遊戲,乙個無法逃避的問題就是怎樣獲取輸入並相應轉化為適當的角色行為,我們都知道通過input方法獲取按鍵輸入資訊,並且可以通過rigidbody給角色速度,但是我們需要對按鍵的資料平滑,同時需要根據按鍵改變角色的方向等,只有這樣才可以讓我們的角色看起來更加靈活。下面部分我將介紹這個過程...

RPG遊戲角色

幾乎所有的rpg遊戲 一種源自 龍與地下城 的遊戲型別 在進入遊戲時都會讓使用者自己來建立自己喜歡的角色。本次上機要求編寫乙個簡化的建立遊戲角色的程式。本題目要求的遊戲角色應有以下屬性 名字 性別 種族 職業 力量 敏捷 體力 智力 智慧型 生命值和魔法值。該程式中用到了開閉原則,單一職責。clas...