手把手教你在cocos2d-x中使用TileMap地圖編輯器(一)

有段時間沒更新博客了,最近一直忙項目,下面就把我最近的新成果給大家分享一下。

近段時間主要是在研究開發工具與遊戲製作的結合,大家知道工慾善其事必先利其器,一款好的方便的開發工具能夠極大的提高遊戲的開發效率,特別是在製作關卡這些東西的時候,這也就是爲什麼國外現在有這麼多的開發引擎工具,特別是3d的比如unity3d,unreal,cryEngine等等都是基於這種需求而開發的。

那麼我這個新系列的博客也就是教大家如何使用TileMap這款地圖編輯器來提高大家在製作2d地圖方面的效率。

這邊我可能主要介紹的是一些高級用法,2d地圖編輯器的一些基礎用法如果大家還不清楚的就自己去百度一下,查查資料了。

下面進入正題,首先提供一下TileMap的下載地址

http://www.mapeditor.org/

TileMap是一款開源的地圖編輯器,使用qt開發,因此可以跨平臺,而且因爲開源,所以大家還可以根據自己的需求進行加工和修改,這一點是很重要。

這裏爲剛接觸遊戲開發的同學插一句,爲什麼要開發地圖編輯器呢,我們就用整張圖做地圖不就好了嗎?

這裏簡單回答一下,好處有兩個:

第一個是極大的減少用圖的面積,這樣就減少了在運行時系統佔用的內存,具體原理問你們的boss或者度娘。

第二個好處是可以通個打散的地圖方便在格子中做很多事件,方便判斷,比如做地圖行走障礙判斷,做觸發事件判斷。

下載之後安裝,打開編輯器如下。

 

點擊新建地圖,彈出如下方框

 

 

編輯器地圖方向可以選擇 “正常”或者“45度”兩種,這個是很多其他編輯器沒有的功能,大部分的編輯器都只支持單一方向的地圖編輯,所以這也是我選擇TileMap這款編輯器來開發的原因。

地圖大小表示地圖格子數的多少,30*30 的話就是一共900個格子

右邊的塊大小表示單個格子的大小,這裏是64*32, 一般正方向地圖塊大小都是一致的,這邊我們使用32*32。

按確定之後如下圖

 

下面我們添加圖片資源

點擊“地圖”->新圖塊,彈出下框

 

 

點擊“瀏覽”按鈕選擇一張圖片,這裏我們用cocos2d-x裏面自帶的很有代表性的圖片,路徑如下

cocos2d-2.0-x-2.0.2\samples\TestCpp\Resources\TileMaps\tmw_desert_spacing.png

 

這裏塊的寬高就是32,說一下邊距和間距的意思,

邊距就是指兩個塊之間橫向的間隔

間距就是指兩個塊之間縱向的間隔

我們看到圖片上有很多黑色線,一般大家之前做的圖塊是不會加這些間隔線的,但是可能有特殊情況,那現在我們就遇到了,所以現在如果我們這邊不加間距和邊距的話,切出來的圖塊就會出現問題。

 

 

大家可以看見這裏是我沒有設置間距和邊距切出來的圖塊,明顯的偏差的像素會越來越多,

下面我們把這張圖塊先刪除,再重新添加原圖塊

點擊圖塊下方的“垃圾桶”按鈕刪除圖塊。

下面我們看看設置邊距間距之後,這裏我們都設置爲1個像素

好了,我們看見圖塊的分割白線已經把圖片上本身的黑色線完美覆蓋,說明我們的設置是正確的,下面就可以用圖塊來拼接一張地圖了

 

 

這一排就是工具按鈕,一般做地圖的時候用前3個按鈕

第一個是圖章,單個刷,或者一個矩形的圖塊刷用這個工具

第二個是填充,

第三個是橡皮擦

大家試一下就知道用法了,記住,在圖塊層上的時候可以用鼠標一次框選一個矩形的圖塊哦,然後用第一個圖章刷就很方便快速了。

 

好了,大家都練習一下吧。

最後導出就點擊  文件->另存爲就行了。

這裏再教大家幾個小技巧:

選中圖塊,按鍵盤“X”快捷鍵可以實現圖塊原地水平翻轉,“Y”是垂直翻轉,

“Z”鍵可以循環90度翻轉。非常實用

還有一個隨機模式的按鈕

 

這個按鈕的作用是當選中之後

然後在地圖塊上框選一大塊地圖,這時候在地圖上繪製的時候會隨機從你選中的很多圖塊中裏面選取一個繪製在地圖上效果如下

另外,所有TileMap中的指令大家可以在這裏查到

https://github.com/bjorn/tiled/wiki/Keyboard-Shortcuts

現在應該知道學好英語的重要性了吧

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章