在开始地图之前,先了解下地图的概念。
大家都见过瓷砖吧,有的墙上用瓷砖拼出一幅画,这就是我们地图的概念。用小图拼出大图。
[img]http://dl2.iteye.com/upload/attachment/0095/4563/ddafbf65-bd51-36ee-9348-dcbd52944ae9.png[/img]
但是这个地图跟拼瓷砖不同的一点是,瓷砖一般就一层,但是地图可以铺多层。
层的概念我们用俩个透明玻璃来形容一下。例如背景图一层,然后物体等等又一层,在一块玻璃上画上蓝天白云,另外一块只画个小兔子。两块叠加。一幅画成了。只不过这幅画是两部分组成的 :)
这里背景图只是为了好看,就跟我们平常看到的游戏背景一样,没有任何作用,就是为了好看。然后另外的那层放物体的则是为了游戏中的交互。
例如:天天酷跑,酷跑中的障碍物等等就算第二层了。
接下来我们看下地图编辑软件的使用。对于我这种不会美工的,这也算是不错的工具了。
但是画出图实在是拿不出手,只好网上找个图片凑合用下(图片资源来自于互联网,仅供学习使用,请勿用作商业用途,否则后果自负。)
官方介绍了两种工具
第一种:http://www.mapeditor.org/ 就是上面的那张图的样子。
第二种:http://tide.codeplex.com/
[img]http://dl2.iteye.com/upload/attachment/0095/4577/7eab2a4d-6544-36ca-afe6-9124f17c6fe1.png[/img]
第一种工具可以跨平台使用,什么Windows/Linux/Mac OS X统统支持。
第二种就只能在windows平台使用了。
具体用那种看自己需要了。这里为了跨平台,我使用第一种工具简单演示下。
新建一个由20*10块组成的地图,每块像素10*10 用10*10像素是为了方便计算,一会说计算的事情
[img]http://dl2.iteye.com/upload/attachment/0095/4601/3e40519f-59ee-362a-8a5b-5d48ff17b130.jpg[/img]
然后选择地图-新图块
[img]http://dl2.iteye.com/upload/attachment/0095/4605/3114e086-b4b3-3bf4-9b3d-b580f1215ab2.jpg[/img]
好了,开始玩拼图游戏吧,在右边选择图块范围,然后放到地图上吧,因为我使用的是整张图片,(自己画的实在是惨不忍睹),直接都拖过来
[img]http://dl2.iteye.com/upload/attachment/0095/4609/c866c7af-228b-3d70-82dd-fd7563bbb075.jpg[/img]
接下来说说计算的事情。如果想要让图片高度正好填满屏幕,我们来计算下。
我设定的世界高度为6f,地图大小为10像素*10个=100。怎么变成6f,100*x=6 x=0.06
也就是说需要缩小。倍率为0.06。一会显示地图的时候我们需要这个数字。
接下来看看生成的地图文件 map.tmx
需要注意的就是
这个图片就是刚才我们选用的地图块的时候,选择的图片。需要拷贝到assets目录下。具体路径是和map.tmx的位置有关。
看下我的路径地址:
[img]http://dl2.iteye.com/upload/attachment/0095/4617/967b2626-0943-31c2-9181-c8d049f142ab.jpg[/img]
我放到了map目录下的又一级map目录下。map.tmx文件在它的上一级,所以,文件中的地址就是
注意下这个就可以了,一般生成的地图文件都需要修改下。还有图层的名称等,为了不给自己找麻烦就别用中文了。
然后看看如何加载。一种是直接加载,一种是使用资源管理器。
直接加载很简单:
这里为了显得咱专业,使用资源管理器进行加载,记得前面介绍的资源管理器吧。
把它加到资源列表就行了。
很简单不是,然后使用的时候直接get就可以了
如何显示地图呢。先来个地图的渲染
初始化它,这里我们使用正交
看到0.06f了吧,这里我们在渲染的时候缩小它匹配屏幕。
然后显示地图
this.camera。前几篇提到的正交相机。
效果
[img]http://dl2.iteye.com/upload/attachment/0095/4637/7a43c7ea-6a6d-36d8-9031-75248080968d.png[/img]
但是这样跑动还是没有人物移动地图倒退的感觉。前面也说过相机来实现地图,演员的移动,缩放等。现在我们试试
修改GirlView类
[img]http://dl2.iteye.com/upload/attachment/0095/4643/f131912f-23e6-38a5-8f1c-d305794d99ba.png[/img]
大家都见过瓷砖吧,有的墙上用瓷砖拼出一幅画,这就是我们地图的概念。用小图拼出大图。
[img]http://dl2.iteye.com/upload/attachment/0095/4563/ddafbf65-bd51-36ee-9348-dcbd52944ae9.png[/img]
但是这个地图跟拼瓷砖不同的一点是,瓷砖一般就一层,但是地图可以铺多层。
层的概念我们用俩个透明玻璃来形容一下。例如背景图一层,然后物体等等又一层,在一块玻璃上画上蓝天白云,另外一块只画个小兔子。两块叠加。一幅画成了。只不过这幅画是两部分组成的 :)
这里背景图只是为了好看,就跟我们平常看到的游戏背景一样,没有任何作用,就是为了好看。然后另外的那层放物体的则是为了游戏中的交互。
例如:天天酷跑,酷跑中的障碍物等等就算第二层了。
接下来我们看下地图编辑软件的使用。对于我这种不会美工的,这也算是不错的工具了。
但是画出图实在是拿不出手,只好网上找个图片凑合用下(图片资源来自于互联网,仅供学习使用,请勿用作商业用途,否则后果自负。)
官方介绍了两种工具
第一种:http://www.mapeditor.org/ 就是上面的那张图的样子。
第二种:http://tide.codeplex.com/
[img]http://dl2.iteye.com/upload/attachment/0095/4577/7eab2a4d-6544-36ca-afe6-9124f17c6fe1.png[/img]
第一种工具可以跨平台使用,什么Windows/Linux/Mac OS X统统支持。
第二种就只能在windows平台使用了。
具体用那种看自己需要了。这里为了跨平台,我使用第一种工具简单演示下。
新建一个由20*10块组成的地图,每块像素10*10 用10*10像素是为了方便计算,一会说计算的事情
[img]http://dl2.iteye.com/upload/attachment/0095/4601/3e40519f-59ee-362a-8a5b-5d48ff17b130.jpg[/img]
然后选择地图-新图块
[img]http://dl2.iteye.com/upload/attachment/0095/4605/3114e086-b4b3-3bf4-9b3d-b580f1215ab2.jpg[/img]
好了,开始玩拼图游戏吧,在右边选择图块范围,然后放到地图上吧,因为我使用的是整张图片,(自己画的实在是惨不忍睹),直接都拖过来
[img]http://dl2.iteye.com/upload/attachment/0095/4609/c866c7af-228b-3d70-82dd-fd7563bbb075.jpg[/img]
接下来说说计算的事情。如果想要让图片高度正好填满屏幕,我们来计算下。
我设定的世界高度为6f,地图大小为10像素*10个=100。怎么变成6f,100*x=6 x=0.06
也就是说需要缩小。倍率为0.06。一会显示地图的时候我们需要这个数字。
接下来看看生成的地图文件 map.tmx
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="20" height="10" tilewidth="10" tileheight="10">
<tileset firstgid="1" name="background" tilewidth="10" tileheight="10">
<image source="map/map1_wall.png" width="480" height="104"/>
</tileset>
<layer name="layer1" width="20" height="10">
<data encoding="base64" compression="zlib">
具体base64内容我删除掉了,太多了
</data>
</layer>
</map>
需要注意的就是
<image source="map/map1_wall.png"
这个图片就是刚才我们选用的地图块的时候,选择的图片。需要拷贝到assets目录下。具体路径是和map.tmx的位置有关。
看下我的路径地址:
[img]http://dl2.iteye.com/upload/attachment/0095/4617/967b2626-0943-31c2-9181-c8d049f142ab.jpg[/img]
我放到了map目录下的又一级map目录下。map.tmx文件在它的上一级,所以,文件中的地址就是
map/map1_wall.png
注意下这个就可以了,一般生成的地图文件都需要修改下。还有图层的名称等,为了不给自己找麻烦就别用中文了。
然后看看如何加载。一种是直接加载,一种是使用资源管理器。
直接加载很简单:
TiledMap map = new TmxMapLoader().load("data/map/map.tmx");
这里为了显得咱专业,使用资源管理器进行加载,记得前面介绍的资源管理器吧。
把它加到资源列表就行了。
assetManager.setLoader(TiledMap.class, new TmxMapLoader(new InternalFileHandleResolver()));
assetManager.load("data/map/map.tmx", TiledMap.class);
很简单不是,然后使用的时候直接get就可以了
TiledMap map = assetManager.get("data/map/map.tmx", TiledMap.class);
如何显示地图呢。先来个地图的渲染
private TiledMapRenderer tiledMapRenderer;
初始化它,这里我们使用正交
tiledMapRenderer = new OrthogonalTiledMapRenderer(map, 0.06f, spriteBatch);
看到0.06f了吧,这里我们在渲染的时候缩小它匹配屏幕。
然后显示地图
tiledMapRenderer.setView(this.camera);
tiledMapRenderer.render();
this.camera。前几篇提到的正交相机。
效果
[img]http://dl2.iteye.com/upload/attachment/0095/4637/7a43c7ea-6a6d-36d8-9031-75248080968d.png[/img]
但是这样跑动还是没有人物移动地图倒退的感觉。前面也说过相机来实现地图,演员的移动,缩放等。现在我们试试
修改GirlView类
package com.me.mygdxgame.view;
import com.badlogic.gdx.assets.AssetManager;
import com.badlogic.gdx.assets.loaders.resolvers.InternalFileHandleResolver;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.Animation;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.maps.tiled.TiledMap;
import com.badlogic.gdx.maps.tiled.TiledMapRenderer;
import com.badlogic.gdx.maps.tiled.TmxMapLoader;
import com.badlogic.gdx.maps.tiled.renderers.OrthogonalTiledMapRenderer;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.utils.Disposable;
import com.me.mygdxgame.actor.GirlActor;
import com.me.mygdxgame.actor.World;
/**
* view层
* 主要负责渲染场景,演员和资源加载
*/
public class GirlView implements Disposable {
private GirlActor girlsActor;
//资源管理器专门用来管理资源加载
private AssetManager assetManager;
private SpriteBatch spriteBatch;
private TextureAtlas textureAtlas;
private TextureRegion[] girlRunFrameLeft;
private TextureRegion[] girlRunFrameRight;
private Animation animationRight;
private Animation animationLeft;
private TextureRegion currentFrame;
private boolean isload;
private OrthographicCamera camera;
private World world;
private TiledMap map;
private TiledMapRenderer tiledMapRenderer;
/**
* 构造方法 初始化相关的参数。加载演员资源
*
* @param world 游戏世界
*/
public GirlView(World world) {
this.world = world;
assetManager = new AssetManager();
assetManager.load("data/image/girlRun.atlas", TextureAtlas.class);
assetManager.setLoader(TiledMap.class, new TmxMapLoader(new InternalFileHandleResolver()));
assetManager.load("data/map/map.tmx", TiledMap.class);
girlsActor = world.getGirlActor("girl");
spriteBatch = new SpriteBatch();
currentFrame = new TextureRegion();
girlRunFrameLeft = new TextureRegion[16];
girlRunFrameRight = new TextureRegion[16];
this.camera = new OrthographicCamera(world.getWorldWidth(), world.getWorldHeight());
this.camera.position.set(world.getWorldWidth() / 2, world.getWorldHeight() / 2, 0);
isload = false;
}
/**
* 演员资源加载
*/
private void loadAssets() {
//使用资源管理器加载图片纹理资源
textureAtlas = assetManager.get("data/image/girlRun.atlas", TextureAtlas.class);
map = assetManager.get("data/map/map.tmx", TiledMap.class);
//面朝右边跑动的纹理资源
for (int i = 0; i < 16; i++) {
girlRunFrameRight[i] = textureAtlas.findRegion(String.valueOf(i + 1));
}
//面朝右边跑动的纹理资源
for (int i = 0; i < 16; i++) {
girlRunFrameLeft[i] = new TextureRegion(girlRunFrameRight[i]);
//把图片进行反转,第一个是x,第二个是y,我们只进行x方向上的反转,如果进行y反转,人物就倒立了。
girlRunFrameLeft[i].flip(true, false);
}
//演员左右跑动的动画
animationLeft = new Animation(0.06f, girlRunFrameLeft);
animationRight = new Animation(0.06f, girlRunFrameRight);
tiledMapRenderer = new OrthogonalTiledMapRenderer(map, 0.06f, spriteBatch);
isload = true;
}
/**
* 演员显示
*/
public void render(float deltaTime) {
camera.update();
//演员走到正中间的时候移动正交相机
//往回走的时候重置正交相机位置
if (girlsActor.getPosition().x > world.getWorldWidth() / 2 - girlsActor.getBounds().getWidth() / 2) {
this.camera.translate(new Vector2(girlsActor.getVelocity().cpy().x * deltaTime, 0));
} else if (girlsActor.getPosition().x < world.getWorldWidth() / 2 - girlsActor.getBounds().getWidth() / 2) {
this.camera.position.set(world.getWorldWidth() / 2, world.getWorldHeight() / 2, 0);
}
if (assetManager.update()) {
if (!isload) {
loadAssets();
}
spriteBatch.setProjectionMatrix(this.camera.combined);
drawMap();
spriteBatch.begin();
drawGirl();
spriteBatch.end();
}
}
/**
* Girl的渲染逻辑
*/
private void drawGirl() {
//获取演员的当前状态,是站立还是跑动状态
switch (girlsActor.getState()) {
//站立状态
case IDLE:
//根据演员的当前面朝方向获取演员的纹理。因为图片中没有站立的,所以我们取第一个为站立图片使用
currentFrame = girlsActor.isFacingRight() ? girlRunFrameRight[0] : girlRunFrameLeft[0];
break;
//跑动状态,当然是获取跑动动画了
case RUNING:
currentFrame = girlsActor.isFacingRight()
? animationRight.getKeyFrame(girlsActor.getStateTime(), true)
: animationLeft.getKeyFrame(girlsActor.getStateTime(), true);
break;
default:
break;
}
spriteBatch.draw(currentFrame
, girlsActor.getPosition().x
, girlsActor.getPosition().y
, girlsActor.getBounds().getWidth()
, girlsActor.getBounds().getHeight());
}
/**
* 地图渲染
*/
private void drawMap() {
tiledMapRenderer.setView(this.camera);
tiledMapRenderer.render();
}
/**
* 资源回收
*/
@Override
public void dispose() {
map.dispose();
assetManager.dispose();
textureAtlas.dispose();
spriteBatch.dispose();
}
}
[img]http://dl2.iteye.com/upload/attachment/0095/4643/f131912f-23e6-38a5-8f1c-d305794d99ba.png[/img]