資訊專欄INFORMATION COLUMN
摘要：和代表普通道路和墻，和代表星星和巖漿。用作裁剪接收圖片對象起始坐標(biāo)和裁剪區(qū)域五個參數(shù)起始坐標(biāo)和裁剪區(qū)域可選用于創(chuàng)建圖像，可以添加到游戲圖層將指定尺寸按照指定行列進行裁剪，返回一個二維數(shù)組生成動畫，每一行為一組動畫。
繪制地圖前準備
在繪制之前，我們先看一下地圖的數(shù)據(jù)實現(xiàn)
globalData = {
mapCol: 11,
mapRow: 11,
size: 32,
floor: 0,
data:[{
map: [
[1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
[1, 1, 2, 2, 2, 0, 2, 2, 2, 1, 1],
[1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
[3, 1, 3, 1, 0, 0, 0, 1, 3, 1, 3],
[3, 3, 3, 3, 3, 0, 3, 3, 3, 3, 3],
[3, 3, 3, 3, 3, 0, 3, 3, 3, 3, 3]
]}
]
}
這里的mapCol和mapRow是我定死的行和列，size為定死的單元格寬度也是高度，floor為當(dāng)前樓層，data存放了所有樓層的數(shù)據(jù)。
繪制//當(dāng)前場景信息
var senceData = null;
function drawInit() {
senceData = globalData.data[globalData.floor];
// 頁面初始化
layers.mapview.removeAllChild();
addMap();
}
將當(dāng)前場景的信息賦值給senceData便于操作管理
layers.mapview.removeAllChild()會清除mapview層的所有東西（就是東西吧）
下面我們看一下addMap()
//添加地圖
function addMap() {
var bitMapData, bitMapDataCell, bitMap, mapImagesArray;
var index;
for (var i = 0; i < globalData.mapRow; i++) {
for (var j = 0; j < globalData.mapCol; j++) {
index = senceData.map[i][j];
// 根據(jù)index的值判斷地圖的類型
// 0 道路
// 1 普通墻
// 2 星星墻
// 3 巖漿墻
if (index === 0 || index === 1) {
bitMapDataCell = new LBitmapData(imgList["map"], index * globalData.size, 3 * globalData.size, globalData.size, globalData.size);
bitMap = new LBitmap(bitMapDataCell);
} else if (index === 2 || index === 3) {
bitMapData = new LBitmapData(imgList["map"]);
mapImagesArray = LGlobal.divideCoordinate(bitMapData.width, bitMapData.height, 4, 4);
bitMap = new LAnimationTimeline(bitMapData, mapImagesArray);
bitMap.setLabel("2", 2, j % 4, 1, true);
bitMap.setLabel("3", 0, j % 4, 1, true);
bitMap.speed = 5;
bitMap.gotoAndPlay(index);
}
bitMap.x = j * globalData.size;
bitMap.y = i * globalData.size;
layers.mapview.addChild(bitMap);
}
}
};
這里我們通過二維數(shù)組做了地圖的映射。
0和1代表普通道路和墻，2和3代表星星和巖漿。區(qū)別在于一類是不動的一類是動的。
LBitmapData用作裁剪
接收圖片對象、起始坐標(biāo)和裁剪區(qū)域五個參數(shù)（起始坐標(biāo)和裁剪區(qū)域可選）
LBitmap
用于創(chuàng)建圖像，可以添加到游戲圖層
divideCoordinate
將指定尺寸按照指定行列進行裁剪，返回一個二維數(shù)組
LAnimationTimeline
生成動畫，每一行為一組動畫?？梢酝ㄟ^setLabel設(shè)置每一行的name、起始行列、正倒序播放、是否鏡像。
bitMap.gotoAndPlay(index)運行指定的labelName
最后添加在游戲圖層
layers.mapview.addChild(bitMap)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91404.html
摘要：使用的引擎也是第一次寫游戲，主要是興趣使然游戲體驗地址未完成游戲設(shè)計游戲圖層設(shè)計游戲圖層分為了五層。游戲數(shù)據(jù)存儲將游戲涉及的所有數(shù)據(jù)存放到一個對象中，可以在后期很方便的做游戲進度保存。其中為角色的屬性信息。 使用的引擎 lufylegend也是第一次寫rpg游戲，主要是興趣使然游戲體驗地址（未完成） 游戲設(shè)計 游戲圖層設(shè)計 var layers = { back: null, ...
摘要：準備工作圖片素材角色精靈圖分為四個移動方向地圖素材包含精靈圖和普通塊圖物品為普通塊圖人物素材包含和怪物的精靈圖游戲還在開發(fā)中，怪物素材還不完整游戲初始化定義結(jié)構(gòu)并引入引擎初始化為引擎中的全局函數(shù)用于初始化。 準備工作：圖片素材 hero.pngshowImg(https://segmentfault.com/img/bVSYN8?w=128&h=132);角色精靈圖分為四個移動方向 m...
摘要：游戲開發(fā)實戰(zhàn)主要講解使用來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發(fā)實戰(zhàn)主要講解使用HTML5 Canvas來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在本書...
摘要：最近在折騰的端的可視化項目，由于相關(guān)業(yè)務(wù)的需要，用到了這一地圖開發(fā)的神器。其技術(shù)奠基于與。分別指縮放級別地面法線偏移角地軸偏移角等，用以確定當(dāng)前視窗所顯示的地圖區(qū)域和空間關(guān)系。個人認為其最大的亮點在于即使不了解內(nèi)部實現(xiàn)，也不影響其使用。 最近在折騰的 web 端的可視化項目，由于相關(guān)業(yè)務(wù)的需要，用到了 Mapbox 這一地圖開發(fā)的神器。在此先奉上一個基于mapbox-gl實現(xiàn)的demo...
閱讀 1608·2021-09-30 09:47
閱讀 3618·2021-09-22 15:05
閱讀 2850·2021-08-30 09:44
閱讀 3627·2019-08-30 15:55
閱讀 1379·2019-08-30 13:08
閱讀 1334·2019-08-29 16:40
閱讀 558·2019-08-29 12:45
閱讀 1394·2019-08-29 11:25
