Initial commit
This commit is contained in:
parent
e53224144f
commit
9701dec54b
234
README.md
234
README.md
|
|
@ -1,3 +1,233 @@
|
|||
# cocos_creator3-TiledMa
|
||||
# 【Cocos Creator实战教程(3)】——TiledMap(瓦片地图)组件
|
||||
|
||||
【Cocos Creator实战教程(3)】——TiledMap(瓦片地图)组件
|
||||
# 1. 前言
|
||||
|
||||
瓦片地图是由一张一张的正方形小图片拼接成的地图，例如炸弹人，QQ堂都是非常典型的瓦片游戏。瓦片地图(Tile Map) 不但生成简单，并且可以灵活的用于Cocos2d-x引擎。不论你的游戏是角色扮演游戏, 平台动作游戏或仿打砖块游戏，这些游戏地图可以使用开源的瓦片地图编辑器Tiled Map Editor生成并保存为TMX文件格式，被Cocos2d-x支持。
|
||||
|
||||
# 2. 步骤
|
||||
|
||||
## 2.1 安装Tiled Map Editor
|
||||
|
||||
edit（编辑）->preferences（参数）里面可以设置语言
|
||||
|
||||
## 2.2 TiledMap制作
|
||||
|
||||
新建一张地图
|
||||
|
||||
|
||||
|
||||
建立三个图层和一个对象层并将资源图块导入 （最下面的图层将显示在最下面）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- ground层：用ground图块填充满（按住鼠标左键）
|
||||
|
||||
- barriers层：用barrier图块
|
||||
|
||||
- stars层：用star图块
|
||||
|
||||
最终效果如下图
|
||||
|
||||
|
||||
|
||||
选择players对象层，在如图位置插入两个图块对象，并更改名称如图
|
||||
|
||||
|
||||
|
||||
给星星添加一个属性
|
||||
|
||||
|
||||
|
||||
保存为tmx文件，和图片文件放在一起
|
||||
|
||||
### 2.3 Cocos Creator中使用TiledMap：
|
||||
|
||||
- 新建一个TiledMapTest工程，创建一个Game场景
|
||||
|
||||
- 将刚才生成的tmx文件和相关图片一起添加到工程
|
||||
|
||||
- 将map.tmx文件拖入层级管理器或者属性编辑器，就会自动生成map节点以及其子节点(也就是图层节点)【没有对象层节点】
|
||||
|
||||
- 最后将player（安卓小机器人）图片拖入（位置随意），创建player节点，并使其为map节点的子节点。
|
||||
|
||||
- 调整map和player节点的锚点都为（0,0）也就是左下角
|
||||
|
||||
- 创建map.js脚本添加到map节点
|
||||
|
||||
```javascript
|
||||
cc.Class({
|
||||
extends: cc.Component,
|
||||
|
||||
properties: {
|
||||
},
|
||||
|
||||
// use this for initialization
|
||||
onLoad: function () {
|
||||
this.player = this.node.getChildByName('player');
|
||||
this.loadMap();
|
||||
|
||||
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
|
||||
},
|
||||
|
||||
onKeyDown:function(event){
|
||||
var newTile = cc.p(this.playerTile.x, this.playerTile.y);
|
||||
switch(event.keyCode) {
|
||||
case cc.KEY.up:
|
||||
newTile.y -= 1;
|
||||
break;
|
||||
case cc.KEY.down:
|
||||
newTile.y += 1;
|
||||
break;
|
||||
case cc.KEY.left:
|
||||
newTile.x -= 1;
|
||||
break;
|
||||
case cc.KEY.right:
|
||||
newTile.x += 1;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
this.tryMoveToNewTile(newTile);
|
||||
},
|
||||
|
||||
//加载地图文件时调用
|
||||
loadMap: function () {
|
||||
//初始化地图位置
|
||||
this.node.setPosition(cc.visibleRect.bottomLeft);
|
||||
//地图
|
||||
this.tiledMap = this.node.getComponent(cc.TiledMap);
|
||||
//players对象层
|
||||
let players = this.tiledMap.getObjectGroup('players');
|
||||
//startPoint和endPoint对象
|
||||
let startPoint = players.getObject('startPoint');
|
||||
let endPoint = players.getObject('endPoint');
|
||||
//像素坐标
|
||||
let startPos = cc.p(startPoint.offset.x, startPoint.offset.y);
|
||||
let endPos = cc.p(endPoint.offset.x, endPoint.offset.y);
|
||||
//障碍物图层和星星图层
|
||||
this.barriers = this.tiledMap.getLayer('barriers');
|
||||
this.stars = this.tiledMap.getLayer('stars');
|
||||
//出生Tile和结束Tile
|
||||
this.playerTile = this.startTile = this.getTilePos(startPos);
|
||||
this.endTile = this.getTilePos(endPos);
|
||||
//更新player位置
|
||||
this.updatePlayerPos();
|
||||
},
|
||||
|
||||
tryMoveToNewTile: function(newTile) {
|
||||
let width = this.tiledMap.node.width;
|
||||
let height = this.tiledMap.node.height;
|
||||
if (newTile.x < 0 || newTile.x >= width) return;
|
||||
if (newTile.y < 0 || newTile.y >= height) return;
|
||||
|
||||
if (this.barriers.getTileGIDAt(newTile)) {//GID=0,则该Tile为空
|
||||
cc.log('This way is blocked!');
|
||||
return false;
|
||||
}
|
||||
|
||||
this.tryCatchStar(newTile);
|
||||
|
||||
this.playerTile = newTile;
|
||||
this.updatePlayerPos();
|
||||
|
||||
if (cc.pointEqualToPoint(this.playerTile, this.endTile)) {
|
||||
cc.log('succeed');
|
||||
}
|
||||
},
|
||||
|
||||
tryCatchStar: function(newTile){
|
||||
let GID = this.stars.getTileGIDAt(newTile);
|
||||
let prop = this.tiledMap.getPropertiesForGID(GID);
|
||||
|
||||
if (this.stars.getTileGIDAt(newTile)) {//GID=0,则该Tile为空
|
||||
this.stars.removeTileAt(newTile);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
//将像素坐标转化为瓦片坐标
|
||||
getTilePos: function(posInPixel) {
|
||||
let mapSize = this.node.getContentSize();
|
||||
let tileSize = this.tiledMap.getTileSize();
|
||||
let x = Math.floor(posInPixel.x / tileSize.width);
|
||||
let y = Math.floor(posInPixel.y / tileSize.height);
|
||||
return cc.p(x, y);
|
||||
},
|
||||
|
||||
updatePlayerPos: function() {
|
||||
let pos = this.barriers.getPositionAt(this.playerTile);
|
||||
this.player.setPosition(pos);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
最终如下图：
|
||||
|
||||
|
||||
|
||||
# 3. 总结
|
||||
|
||||
```javascript
|
||||
# CC.TiledMap:
|
||||
~properties:
|
||||
tmxFile//地图文件
|
||||
mapLoaded//地图加载是调用的函数
|
||||
~function:
|
||||
getMapSize()//
|
||||
setMapSize()//
|
||||
getTileSize()//
|
||||
setTileSize()//
|
||||
getLayer(name)//returns TieldLayer
|
||||
getObjectGroup(name)//returns TMXObjectGroup
|
||||
getPropertiesForGID(GID)//returns Object(属性字典)
|
||||
|
||||
# CC.TieldLayer
|
||||
getPositionAt(pos)//returns Vec2(像素坐标) 参数是瓦片坐标
|
||||
removeTileAt(pos)//瓦片坐标
|
||||
getTileGIDAt(pos)//returns Number(全局唯一标识，0为空)
|
||||
getTileAt(pos)//returns _ccsg.Sprite //removeChild(sprite);
|
||||
setTileGID(gid，pos)//相当于在pos位置添加GID的图块（原来的图块删除）
|
||||
getTileSize()//
|
||||
setTleSize()//
|
||||
getMapTileSize()
|
||||
|
||||
# TMXObjectGroup:
|
||||
~properties:
|
||||
~function:
|
||||
var getObject(var objectName)//返回属性字典
|
||||
# _ccsg.Sprite://cocos js 里的Sprite，继承自CC.Node,而不是组件
|
||||
~properties：
|
||||
x
|
||||
y
|
||||
width
|
||||
height
|
||||
opacity
|
||||
...//节点的属性都有
|
||||
~function:
|
||||
var setSpriteFrame(var spriteFrameName)
|
||||
var runAction(var action)
|
||||
...//节点的方法都有
|
||||
```
|
||||
|
||||
- 图块放置的位置是基于像素坐标，而图块在map中的索引是基于瓦片坐标（整数），所以在脚本文件中要适时转变
|
||||
|
||||
- 对象层的对象（比如我们上面做的两个player point），在Cocos Creator中是不会显示的
|
||||
|
||||
- 对象层记录的是位置信息，图层记录的是图片信息
|
||||
|
||||
- .tmx文件其实保存的图块的一种映射关系，所以图块文件和地图文件要始终放在一起，不然可能会显示出错
|
||||
|
||||
- GID是图块在一个地图文件中的唯一ID，（图块指的是右下角的图块文件，每一个图块都不相同，瓦片指的指地图中的块，可以是相同的图块），GID为0说明该Tile的图块为空
|
||||
|
||||
- 当利用getPropertiesForGID(GID)之类的方法时，得到的返回值是属性字典，可以直接通过点方法得到其属性值，属性值都是字符串类型
|
||||
|
||||
- 当用到getTileAt(pos)时，得到的返回值是Cocos2d 的Sprite，而不是Cocos Creator的Sprite，相关方法可以查找Cocos2d js的API，需要注意的一点是，Cocos2d的Sprite是继承自节点的，而不是组件式，所以我们可以直接这样写“mySprite.x = 100”而不是“mySprite.node.x = 100”
|
||||
|
||||
- 地图中同一层只能使用一张图集里的图块
|
||||
|
||||
注意：本教程资源部分来源于网络
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -0,0 +1,39 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="20" height="20" tilewidth="32" tileheight="32">
|
||||
<tileset firstgid="1" name="barriers" tilewidth="32" tileheight="32">
|
||||
<image source="barriers.png" width="192" height="192"/>
|
||||
</tileset>
|
||||
<tileset firstgid="37" name="ground" tilewidth="32" tileheight="32">
|
||||
<image source="ground.png" width="32" height="32"/>
|
||||
</tileset>
|
||||
<tileset firstgid="38" name="player" tilewidth="32" tileheight="32">
|
||||
<image source="player.png" width="32" height="32"/>
|
||||
</tileset>
|
||||
<tileset firstgid="39" name="star" tilewidth="32" tileheight="32">
|
||||
<image source="star.png" width="32" height="32"/>
|
||||
<tile id="0">
|
||||
<properties>
|
||||
<property name="isStar" value="true"/>
|
||||
</properties>
|
||||
</tile>
|
||||
</tileset>
|
||||
<layer name="ground" width="20" height="20">
|
||||
<data encoding="base64" compression="zlib">
|
||||
eJxTZWBgUB3Fo3gUj+JRPIpJxAAueznR
|
||||
</data>
|
||||
</layer>
|
||||
<layer name="barriers" width="20" height="20">
|
||||
<data encoding="base64" compression="zlib">
|
||||
eJxjYKAfkANiWShNLfOUgViFSuaJoNGj5g1f8whhbHrR5Yl1Fy7zCNmByz3EmkcsoJd5lOBRMDgBAAPnBTM=
|
||||
</data>
|
||||
</layer>
|
||||
<layer name="stars" width="20" height="20">
|
||||
<data encoding="base64" compression="zlib">
|
||||
eJxjYBgFo2AUDBegTiO1o2AUYAMAvawATw==
|
||||
</data>
|
||||
</layer>
|
||||
<objectgroup name="players">
|
||||
<object name="startPoint" gid="38" x="96" y="128"/>
|
||||
<object name="endPoint" gid="38" x="256" y="128"/>
|
||||
</objectgroup>
|
||||
</map>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
|
|
@ -0,0 +1,67 @@
|
|||
#/////////////////////////////////////////////////////////////////////////////
|
||||
# Fireball Projects
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
library/
|
||||
temp/
|
||||
local/
|
||||
build/
|
||||
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
# Logs and databases
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
*.log
|
||||
*.sql
|
||||
*.sqlite
|
||||
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
# files for debugger
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
*.sln
|
||||
*.csproj
|
||||
*.pidb
|
||||
*.unityproj
|
||||
*.suo
|
||||
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
# OS generated files
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.DS_Store
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
# exvim files
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
*UnityVS.meta
|
||||
*.err
|
||||
*.err.meta
|
||||
*.exvim
|
||||
*.exvim.meta
|
||||
*.vimentry
|
||||
*.vimentry.meta
|
||||
*.vimproject
|
||||
*.vimproject.meta
|
||||
.vimfiles.*/
|
||||
.exvim.*/
|
||||
quick_gen_project_*_autogen.bat
|
||||
quick_gen_project_*_autogen.bat.meta
|
||||
quick_gen_project_*_autogen.sh
|
||||
quick_gen_project_*_autogen.sh.meta
|
||||
.exvim.app
|
||||
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
# webstorm files
|
||||
#/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.idea/
|
||||
|
||||
#//////////////////////////
|
||||
# VS Code
|
||||
#//////////////////////////
|
||||
|
||||
.vscode/
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"ver": "1.0.1",
|
||||
"uuid": "ea68c6e6-93b6-4eb0-9c53-3d3d30e1de0a",
|
||||
"subMetas": {}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"ver": "1.0.0",
|
||||
"uuid": "8f7f51df-2e8c-435a-b560-5bc96437d3bf",
|
||||
"type": "sprite",
|
||||
"wrapMode": "clamp",
|
||||
"filterMode": "bilinear",
|
||||
"subMetas": {
|
||||
"barriers": {
|
||||
"ver": "1.0.3",
|
||||
"uuid": "8c8710ac-2735-4c82-a8ea-d5f6f3c5c482",
|
||||
"rawTextureUuid": "8f7f51df-2e8c-435a-b560-5bc96437d3bf",
|
||||
"trimType": "auto",
|
||||
"trimThreshold": 1,
|
||||
"rotated": false,
|
||||
"offsetX": 0,
|
||||
"offsetY": 0,
|
||||
"trimX": 0,
|
||||
"trimY": 0,
|
||||
"width": 192,
|
||||
"height": 192,
|
||||
"rawWidth": 192,
|
||||
"rawHeight": 192,
|
||||
"borderTop": 0,
|
||||
"borderBottom": 0,
|
||||
"borderLeft": 0,
|
||||
"borderRight": 0,
|
||||
"subMetas": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"ver": "1.0.0",
|
||||
"uuid": "ba850305-21ab-43c8-9b5c-ccd26897c32d",
|
||||
"type": "sprite",
|
||||
"wrapMode": "clamp",
|
||||
"filterMode": "bilinear",
|
||||
"subMetas": {
|
||||
"ground": {
|
||||
"ver": "1.0.3",
|
||||
"uuid": "c27159c2-4a40-411c-9d9a-c64b7313cbca",
|
||||
"rawTextureUuid": "ba850305-21ab-43c8-9b5c-ccd26897c32d",
|
||||
"trimType": "auto",
|
||||
"trimThreshold": 1,
|
||||
"rotated": false,
|
||||
"offsetX": 0,
|
||||
"offsetY": 0,
|
||||
"trimX": 0,
|
||||
"trimY": 0,
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"rawWidth": 32,
|
||||
"rawHeight": 32,
|
||||
"borderTop": 0,
|
||||
"borderBottom": 0,
|
||||
"borderLeft": 0,
|
||||
"borderRight": 0,
|
||||
"subMetas": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="20" height="20" tilewidth="32" tileheight="32">
|
||||
<tileset firstgid="1" name="barriers" tilewidth="32" tileheight="32">
|
||||
<image source="barriers.png" width="192" height="192"/>
|
||||
</tileset>
|
||||
<tileset firstgid="37" name="ground" tilewidth="32" tileheight="32">
|
||||
<image source="ground.png" width="32" height="32"/>
|
||||
</tileset>
|
||||
<tileset firstgid="38" name="player" tilewidth="32" tileheight="32">
|
||||
<image source="player.png" width="32" height="32"/>
|
||||
</tileset>
|
||||
<tileset firstgid="39" name="star" tilewidth="32" tileheight="32">
|
||||
<image source="star.png" width="32" height="32"/>
|
||||
<tile id="0">
|
||||
<properties>
|
||||
<property name="isStar" value="true"/>
|
||||
</properties>
|
||||
</tile>
|
||||
</tileset>
|
||||
<layer name="ground" width="20" height="20">
|
||||
<data encoding="base64" compression="zlib">
|
||||
eJxTZWBgUB3Fo3gUj+JRPIpJxAAueznR
|
||||
</data>
|
||||
</layer>
|
||||
<layer name="barriers" width="20" height="20">
|
||||
<data encoding="base64" compression="zlib">
|
||||
eJxjYKAfkANiWShNLfOUgViFSuaJoNGj5g1f8whhbHrR5Yl1Fy7zCNmByz3EmkcsoJd5lOBRMDgBAAPnBTM=
|
||||
</data>
|
||||
</layer>
|
||||
<layer name="stars" width="20" height="20">
|
||||
<data encoding="base64" compression="zlib">
|
||||
eJxjYBgFo2AUDBegTiO1o2AUYAMAvawATw==
|
||||
</data>
|
||||
</layer>
|
||||
<objectgroup name="players">
|
||||
<object name="startPoint" gid="38" x="96" y="128"/>
|
||||
<object name="endPoint" gid="38" x="256" y="128"/>
|
||||
</objectgroup>
|
||||
</map>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"ver": "1.0.4",
|
||||
"uuid": "d70b7f04-449a-442f-8b94-394e1d266481",
|
||||
"subMetas": {}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"ver": "1.0.0",
|
||||
"uuid": "501db460-5d75-4f7b-8530-d5199b716343",
|
||||
"type": "sprite",
|
||||
"wrapMode": "clamp",
|
||||
"filterMode": "bilinear",
|
||||
"subMetas": {
|
||||
"player": {
|
||||
"ver": "1.0.3",
|
||||
"uuid": "186fa83a-3398-4bd0-9dec-424c05412ef8",
|
||||
"rawTextureUuid": "501db460-5d75-4f7b-8530-d5199b716343",
|
||||
"trimType": "auto",
|
||||
"trimThreshold": 1,
|
||||
"rotated": false,
|
||||
"offsetX": 0,
|
||||
"offsetY": 0,
|
||||
"trimX": 0,
|
||||
"trimY": 0,
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"rawWidth": 32,
|
||||
"rawHeight": 32,
|
||||
"borderTop": 0,
|
||||
"borderBottom": 0,
|
||||
"borderLeft": 0,
|
||||
"borderRight": 0,
|
||||
"subMetas": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"ver": "1.0.0",
|
||||
"uuid": "a33bfbd0-7d73-42d2-b9e0-c3da8d7bb2d8",
|
||||
"type": "sprite",
|
||||
"wrapMode": "clamp",
|
||||
"filterMode": "bilinear",
|
||||
"subMetas": {
|
||||
"star": {
|
||||
"ver": "1.0.3",
|
||||
"uuid": "7660b5bb-25f8-4505-9048-144fa02e2b7c",
|
||||
"rawTextureUuid": "a33bfbd0-7d73-42d2-b9e0-c3da8d7bb2d8",
|
||||
"trimType": "auto",
|
||||
"trimThreshold": 1,
|
||||
"rotated": false,
|
||||
"offsetX": 0,
|
||||
"offsetY": 0,
|
||||
"trimX": 0,
|
||||
"trimY": 0,
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"rawWidth": 32,
|
||||
"rawHeight": 32,
|
||||
"borderTop": 0,
|
||||
"borderBottom": 0,
|
||||
"borderLeft": 0,
|
||||
"borderRight": 0,
|
||||
"subMetas": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"ver": "1.0.1",
|
||||
"uuid": "59447121-d023-4730-8c34-97a054a4fba8",
|
||||
"subMetas": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,535 @@
|
|||
[
|
||||
{
|
||||
"__type__": "cc.SceneAsset",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"_rawFiles": null,
|
||||
"scene": {
|
||||
"__id__": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Scene",
|
||||
"_objFlags": 0,
|
||||
"_parent": null,
|
||||
"_children": [
|
||||
{
|
||||
"__id__": 2
|
||||
},
|
||||
{
|
||||
"__id__": 4
|
||||
}
|
||||
],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [],
|
||||
"_prefab": null,
|
||||
"_id": "ae1d9a06-e1fa-4018-b81f-0e584d5a28f9",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 0,
|
||||
"height": 0
|
||||
},
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0,
|
||||
"autoReleaseAssets": null
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "Canvas",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 1
|
||||
},
|
||||
"_children": [],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 3
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_id": "8dx5Zs4YJB0ZJVn2nhZF89",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 960,
|
||||
"height": 640
|
||||
},
|
||||
"_rotationX": 0,
|
||||
"_rotationY": 0,
|
||||
"_scaleX": 1,
|
||||
"_scaleY": 1,
|
||||
"_position": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 480,
|
||||
"y": 320
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Canvas",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 2
|
||||
},
|
||||
"_enabled": true,
|
||||
"_designResolution": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 960,
|
||||
"height": 640
|
||||
},
|
||||
"_fitWidth": false,
|
||||
"_fitHeight": true
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "map",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 1
|
||||
},
|
||||
"_children": [
|
||||
{
|
||||
"__id__": 5
|
||||
},
|
||||
{
|
||||
"__id__": 7
|
||||
},
|
||||
{
|
||||
"__id__": 9
|
||||
},
|
||||
{
|
||||
"__id__": 11
|
||||
},
|
||||
{
|
||||
"__id__": 13
|
||||
}
|
||||
],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 15
|
||||
},
|
||||
{
|
||||
"__id__": 16
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_id": "26UbV0FYVCz6oDiEYkwz5t",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 640,
|
||||
"height": 640
|
||||
},
|
||||
"_rotationX": 0,
|
||||
"_rotationY": 0,
|
||||
"_scaleX": 1,
|
||||
"_scaleY": 1,
|
||||
"_position": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "ground",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_children": [],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 6
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_id": "7fvN/PnrtCA7K8yTL6DTAR",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 640,
|
||||
"height": 640
|
||||
},
|
||||
"_rotationX": 0,
|
||||
"_rotationY": 0,
|
||||
"_scaleX": 1,
|
||||
"_scaleY": 1,
|
||||
"_position": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0
|
||||
},
|
||||
{
|
||||
"__type__": "cc.TiledLayer",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 5
|
||||
},
|
||||
"_enabled": true
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "barriers",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_children": [],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 8
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_id": "e6IV1E30NAJYcGBOP/E+Qi",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 640,
|
||||
"height": 640
|
||||
},
|
||||
"_rotationX": 0,
|
||||
"_rotationY": 0,
|
||||
"_scaleX": 1,
|
||||
"_scaleY": 1,
|
||||
"_position": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0
|
||||
},
|
||||
{
|
||||
"__type__": "cc.TiledLayer",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 7
|
||||
},
|
||||
"_enabled": true
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "stars",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_children": [],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 10
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_id": "b9p+RUShJDuItVz2wCueps",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 640,
|
||||
"height": 640
|
||||
},
|
||||
"_rotationX": 0,
|
||||
"_rotationY": 0,
|
||||
"_scaleX": 1,
|
||||
"_scaleY": 1,
|
||||
"_position": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0
|
||||
},
|
||||
{
|
||||
"__type__": "cc.TiledLayer",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 9
|
||||
},
|
||||
"_enabled": true
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "players",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_children": [],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 12
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_id": "41pVddslNKe7+HPf7YIGte",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 640,
|
||||
"height": 640
|
||||
},
|
||||
"_rotationX": 0,
|
||||
"_rotationY": 0,
|
||||
"_scaleX": 1,
|
||||
"_scaleY": 1,
|
||||
"_position": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0
|
||||
},
|
||||
{
|
||||
"__type__": "cc.TiledObjectGroup",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 11
|
||||
},
|
||||
"_enabled": true
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "player",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_children": [],
|
||||
"_tag": -1,
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 14
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_id": "b3+ciue65FX7AAMQEMex6Y",
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_cascadeOpacityEnabled": true,
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 32,
|
||||
"height": 32
|
||||
},
|
||||
"_rotationX": 0,
|
||||
"_rotationY": 0,
|
||||
"_scaleX": 1,
|
||||
"_scaleY": 1,
|
||||
"_position": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 530,
|
||||
"y": 391
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_localZOrder": 0,
|
||||
"_globalZOrder": 0,
|
||||
"_opacityModifyRGB": false,
|
||||
"groupIndex": 0
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Sprite",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 13
|
||||
},
|
||||
"_enabled": true,
|
||||
"_spriteFrame": {
|
||||
"__uuid__": "186fa83a-3398-4bd0-9dec-424c05412ef8"
|
||||
},
|
||||
"_type": 0,
|
||||
"_sizeMode": 1,
|
||||
"_fillType": 0,
|
||||
"_fillCenter": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_fillStart": 0,
|
||||
"_fillRange": 0,
|
||||
"_isTrimmedMode": true,
|
||||
"_srcBlendFactor": 770,
|
||||
"_dstBlendFactor": 771,
|
||||
"_atlas": null
|
||||
},
|
||||
{
|
||||
"__type__": "cc.TiledMap",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_enabled": true,
|
||||
"_tmxFile": {
|
||||
"__uuid__": "d70b7f04-449a-442f-8b94-394e1d266481"
|
||||
}
|
||||
},
|
||||
{
|
||||
"__type__": "71675r6L9RJN4r/6bUlY57h",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_enabled": true
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"ver": "1.0.0",
|
||||
"uuid": "ae1d9a06-e1fa-4018-b81f-0e584d5a28f9",
|
||||
"asyncLoadAssets": false,
|
||||
"autoReleaseAssets": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"ver": "1.0.1",
|
||||
"uuid": "020a621d-8c0f-49fb-a533-3433d2fa0105",
|
||||
"subMetas": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
// Learn cc.Class:
|
||||
// - [Chinese] http://www.cocos.com/docs/creator/scripting/class.html
|
||||
// - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/class/index.html
|
||||
// Learn Attribute:
|
||||
// - [Chinese] http://www.cocos.com/docs/creator/scripting/reference/attributes.html
|
||||
// - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/reference/attributes/index.html
|
||||
// Learn life-cycle callbacks:
|
||||
// - [Chinese] http://www.cocos.com/docs/creator/scripting/life-cycle-callbacks.html
|
||||
// - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/life-cycle-callbacks/index.html
|
||||
|
||||
cc.Class({
|
||||
extends: cc.Component,
|
||||
|
||||
properties: {
|
||||
},
|
||||
|
||||
// use this for initialization
|
||||
onLoad: function () {
|
||||
this.player = this.node.getChildByName('player');
|
||||
this.loadMap();
|
||||
|
||||
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
|
||||
},
|
||||
|
||||
onKeyDown:function(event){
|
||||
var newTile = cc.p(this.playerTile.x, this.playerTile.y);
|
||||
switch(event.keyCode) {
|
||||
case cc.KEY.up:
|
||||
newTile.y -= 1;
|
||||
break;
|
||||
case cc.KEY.down:
|
||||
newTile.y += 1;
|
||||
break;
|
||||
case cc.KEY.left:
|
||||
newTile.x -= 1;
|
||||
break;
|
||||
case cc.KEY.right:
|
||||
newTile.x += 1;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
this.tryMoveToNewTile(newTile);
|
||||
},
|
||||
|
||||
//加载地图文件时调用
|
||||
loadMap: function () {
|
||||
//初始化地图位置
|
||||
this.node.setPosition(cc.visibleRect.bottomLeft);
|
||||
//地图
|
||||
this.tiledMap = this.node.getComponent(cc.TiledMap);
|
||||
//players对象层
|
||||
let players = this.tiledMap.getObjectGroup('players');
|
||||
//startPoint和endPoint对象
|
||||
let startPoint = players.getObject('startPoint');
|
||||
let endPoint = players.getObject('endPoint');
|
||||
//像素坐标
|
||||
let startPos = cc.p(startPoint.offset.x, startPoint.offset.y);
|
||||
let endPos = cc.p(endPoint.offset.x, endPoint.offset.y);
|
||||
//障碍物图层和星星图层
|
||||
this.barriers = this.tiledMap.getLayer('barriers');
|
||||
this.stars = this.tiledMap.getLayer('stars');
|
||||
//出生Tile和结束Tile
|
||||
this.playerTile = this.startTile = this.getTilePos(startPos);
|
||||
this.endTile = this.getTilePos(endPos);
|
||||
//更新player位置
|
||||
this.updatePlayerPos();
|
||||
},
|
||||
|
||||
tryMoveToNewTile: function(newTile) {
|
||||
let width = this.tiledMap.node.width;
|
||||
let height = this.tiledMap.node.height;
|
||||
if (newTile.x < 0 || newTile.x >= width) return;
|
||||
if (newTile.y < 0 || newTile.y >= height) return;
|
||||
|
||||
if (this.barriers.getTileGIDAt(newTile)) {//GID=0,则该Tile为空
|
||||
cc.log('This way is blocked!');
|
||||
return false;
|
||||
}
|
||||
|
||||
this.tryCatchStar(newTile);
|
||||
|
||||
this.playerTile = newTile;
|
||||
this.updatePlayerPos();
|
||||
|
||||
if (cc.pointEqualToPoint(this.playerTile, this.endTile)) {
|
||||
cc.log('succeed');
|
||||
}
|
||||
},
|
||||
|
||||
tryCatchStar: function(newTile){
|
||||
let GID = this.stars.getTileGIDAt(newTile);
|
||||
let prop = this.tiledMap.getPropertiesForGID(GID);
|
||||
|
||||
if (this.stars.getTileGIDAt(newTile)) {//GID=0,则该Tile为空
|
||||
this.stars.removeTileAt(newTile);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
//将像素坐标转化为瓦片坐标
|
||||
getTilePos: function(posInPixel) {
|
||||
let mapSize = this.node.getContentSize();
|
||||
let tileSize = this.tiledMap.getTileSize();
|
||||
let x = Math.floor(posInPixel.x / tileSize.width);
|
||||
let y = Math.floor(posInPixel.y / tileSize.height);
|
||||
return cc.p(x, y);
|
||||
},
|
||||
|
||||
updatePlayerPos: function() {
|
||||
let pos = this.barriers.getPositionAt(this.playerTile);
|
||||
this.player.setPosition(pos);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"ver": "1.0.5",
|
||||
"uuid": "71675afa-2fd4-4937-8aff-e9b525639ee1",
|
||||
"isPlugin": false,
|
||||
"loadPluginInWeb": true,
|
||||
"loadPluginInNative": true,
|
||||
"loadPluginInEditor": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"module": "commonjs",
|
||||
"experimentalDecorators": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
".vscode",
|
||||
"library",
|
||||
"local",
|
||||
"settings",
|
||||
"temp"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"engine": "cocos-creator-js",
|
||||
"packages": "packages"
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"start-scene": "current",
|
||||
"group-list": [
|
||||
"default"
|
||||
],
|
||||
"collision-matrix": [
|
||||
[
|
||||
true
|
||||
]
|
||||
],
|
||||
"excluded-modules": [],
|
||||
"design-resolution-width": 960,
|
||||
"design-resolution-height": 640,
|
||||
"fit-width": false,
|
||||
"fit-height": true,
|
||||
"use-project-simulator-setting": false,
|
||||
"simulator-orientation": false,
|
||||
"use-customize-simulator": false,
|
||||
"simulator-resolution": {
|
||||
"width": 960,
|
||||
"height": 640
|
||||
},
|
||||
"cocos-analytics": {
|
||||
"enable": false,
|
||||
"appID": "13798",
|
||||
"appSecret": "959b3ac0037d0f3c2fdce94f8421a9b2"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue