【游戏技术群】959392658  【游戏出海群】12067810
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2396

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 1039|回复: 12

[士郎] [小技巧]简易 2D 地图制作工具

[复制链接]  [移动端链接]
排名
1
昨日变化

7211

主题

7741

帖子

2万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
11795
威望
30
注册时间
2013-7-29
在线时间
3693 小时
最后登录
2019-1-21

社区QQ达人活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

发表于 2018-10-31 15:56:01 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
一、前言
作为 2D 游戏开发者,制作游戏地图是一个必不可少的环节,这篇文章将通过非常简单的方式,在非常短的时间内自己做一个制作游戏的工具。
同时作为一名初学者,希望通过这种方式对自己学习的只是做一个整理、记录,方便日后回顾,水平有限,能力一般,写的不好或不对的地方希望大家指正。







二、原理
该工具通过读取开发者预制定的图片上的像素颜色值,以不同的颜色值代表不同的游戏对象,在场景中与图片上对应的位置生成相应的游戏对象,来实现地图生成的效果。



三、详细说明
3.1 代码开发
首先,自定义一个类,用于将颜色与 GameObject 对应起来,方便进行配置:

[AppleScript] 纯文本查看 复制代码
[System.Serializable]
public class ColorToPrefab
{
        public Color32 color;
        public GameObject prefab;
}

其次,再定义一个类,用于对用户预制定的图片进行加载与生成相应的地图:
[AppleScript] 纯文本查看 复制代码
public class MapLoader : MonoBehaviour
{
        [SerializeField]
        private string mapName = "";    // 预制定图片的名称

        [SerializeField]
        private ColorToPrefab[] colorToPrefabs;    //  配置颜色与 GameObject 映射列表

        private Dictionary<Color32, GameObject> colorIndex = new Dictionary<Color32, GameObject> ();        // 为加快查询设置的索引字典

        void Start ()
        {
                // 进行地图加载与生成
                LoadMap ();
        }

        private void LoadMap ()
        {
                // 初始化索引表
                InitIndex ();

                // 清空已存在的地图对象
                EmptyMap ();

                // 从 Resources 文件夹中根据预制定图片的名称读取该图片
                Texture2D _texture = Resources.Load (mapName) as Texture2D;

                if (_texture != null) {
                        Debug.Log ("Load texture success!");
                } else {
                        Debug.LogError ("Load texture failed!");
                        return;
                }

                // 从图片中读取所有像素值
                Color32[] _colors = _texture.GetPixels32 ();

                // 遍历所有像素值
                for (int i = 0; i < _texture.width; i++) {
                        for (int j = 0; j < _texture.height; j++) {
                                Color32 _c = _colors [(_texture.width * j) + i];

                                // 当像素值的 Alpha 值为 0 时,说明该处为空,不用处理
                                if (_c.a <= 0)
                                        continue;

                                // 从索引字典中找到该颜色值对应的 GameObject,并在相应的位置上生成
                                if (colorIndex.ContainsKey (_c)) {
                                        GameObject go = Instantiate (colorIndex [_c], new Vector3 (i, j, 0), Quaternion.identity) as GameObject;
                                        go.transform.SetParent (transform);
                                } else {
                                        Debug.LogError ("Wrong Color: " + _c.ToString ());
                                }
                        }
                }
        }

        // 初始化索引字典
        private void InitIndex ()
        {
                for (int i = 0; i < colorToPrefabs.Length; i++) {
                        if (!colorIndex.ContainsKey (colorToPrefabs .color)) {
                                colorIndex.Add (colorToPrefabs .color, colorToPrefabs .prefab);
                        } else {
                                Debug.LogError ("Same Color: " + colorToPrefabs .color.ToString ());
                        }
                }
        }

        // 清空已存在的地图对象
        private void EmptyMap ()
        {
                while (transform.childCount > 0) {
                        Transform _tf = transform.GetChild (0);
                        _tf.SetParent (null);
                        Destroy (_tf.gameObject);
                }
        }
}

整个代码非常简短,理解起来应该不难。
3.2 使用步骤
第一步,设计每种颜色值对应的游戏对象
第二步,根据上述对应关系,使用 PS 或 GIMP 等图像处理软件,制作地图,并将该图片放到项目中的 Resources 目录下,如下图所示:

1.jpg


其中黄色代表金币,黑色代表土地,蓝色代表玩家,红色代表怪物


第三步,在场景中新建一个 Empty GameObject,挂在 MapLoader 脚本,并为其设置好地图的名称和颜色与 GameObject 的对应关系,如下图所示:

2.jpg


第四步,点击 Play,即可看到生成的地图了,由于我的地图图片上有四种颜色,我只制定了 3 个对应关系,因此在 Console 里可以看到报错,如下图所示:


3.jpg

到此,地图生成完毕,非常简单。


四、总结
使用该方法生成地图,由于其原理非常简单,开发成本非常低,不仅适用于程序员,甚至连策划和美术都可以在不进行编码的情况下完成对地图的设计。但相比其他带有 GUI 的地图编辑工具还是逊色了几分,可以在小型项目中进行使用。

知乎@杨睿涵





跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
回复

使用道具 举报

6蛮牛粉丝
1216/1500
排名
3808
昨日变化
1

2

主题

348

帖子

1216

积分

Rank: 6Rank: 6Rank: 6

UID
238701
好友
1
蛮牛币
1002
威望
0
注册时间
2017-8-21
在线时间
480 小时
最后登录
2019-1-21
发表于 2018-10-31 16:11:20 | 显示全部楼层
作为一个广西人,在北京吃螺蛳粉还是比较推荐水平有限连锁店

回复 支持 反对

使用道具 举报

5熟悉之中
563/1000
排名
4776
昨日变化
4

0

主题

120

帖子

563

积分

Rank: 5Rank: 5

UID
171160
好友
0
蛮牛币
1494
威望
0
注册时间
2016-9-22
在线时间
147 小时
最后登录
2018-11-23
发表于 2018-11-1 09:04:34 | 显示全部楼层

回复

使用道具 举报

5熟悉之中
754/1000
排名
3455
昨日变化
21

0

主题

167

帖子

754

积分

Rank: 5Rank: 5

UID
264326
好友
0
蛮牛币
1205
威望
0
注册时间
2018-1-14
在线时间
163 小时
最后登录
2019-1-21
发表于 2018-11-1 09:36:40 | 显示全部楼层

回复

使用道具 举报

5熟悉之中
500/1000
排名
5074
昨日变化
1

0

主题

87

帖子

500

积分

Rank: 5Rank: 5

UID
282652
好友
1
蛮牛币
2805
威望
0
注册时间
2018-5-24
在线时间
135 小时
最后登录
2019-1-17
发表于 2018-11-1 10:49:03 | 显示全部楼层
小地图666

回复

使用道具 举报

7日久生情
1687/5000
排名
1336
昨日变化

0

主题

497

帖子

1687

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
87577
好友
0
蛮牛币
5726
威望
0
注册时间
2015-3-31
在线时间
286 小时
最后登录
2019-1-21

锦衣玉食

发表于 2018-11-1 10:57:05 | 显示全部楼层
too good too strong!

回复 支持 反对

使用道具 举报

5熟悉之中
630/1000
排名
4546
昨日变化
1

1

主题

76

帖子

630

积分

Rank: 5Rank: 5

UID
273353
好友
3
蛮牛币
615
威望
0
注册时间
2018-3-20
在线时间
239 小时
最后登录
2019-1-17
发表于 2018-11-1 11:07:05 | 显示全部楼层
学到了,谢谢楼主大大

回复 支持 反对

使用道具 举报

排名
15364
昨日变化
3

0

主题

9

帖子

78

积分

Rank: 2Rank: 2

UID
277705
好友
0
蛮牛币
23
威望
0
注册时间
2018-4-18
在线时间
21 小时
最后登录
2019-1-2
发表于 2018-11-1 14:05:13 | 显示全部楼层
{:97:}学到了,谢谢楼主大大

回复 支持 反对

使用道具 举报

5熟悉之中
740/1000
排名
5074
昨日变化
1

3

主题

131

帖子

740

积分

Rank: 5Rank: 5

UID
168522
好友
0
蛮牛币
402
威望
0
注册时间
2016-9-14
在线时间
328 小时
最后登录
2019-1-21
发表于 2018-11-1 15:47:40 | 显示全部楼层
阅文收币中。。。

回复

使用道具 举报

3偶尔光临
196/300
排名
9437
昨日变化
2

0

主题

7

帖子

196

积分

Rank: 3Rank: 3Rank: 3

UID
241836
好友
0
蛮牛币
332
威望
0
注册时间
2017-9-6
在线时间
71 小时
最后登录
2019-1-21
发表于 2018-11-1 19:10:40 | 显示全部楼层
不错顶一个~

回复

使用道具 举报

6蛮牛粉丝
1419/1500
排名
3710
昨日变化

0

主题

835

帖子

1419

积分

Rank: 6Rank: 6Rank: 6

UID
210390
好友
0
蛮牛币
1703
威望
0
注册时间
2017-3-7
在线时间
190 小时
最后登录
2019-1-21
发表于 2018-11-2 13:42:20 | 显示全部楼层

回复

使用道具 举报

3偶尔光临
275/300
排名
8212
昨日变化
4

1

主题

39

帖子

275

积分

Rank: 3Rank: 3Rank: 3

UID
247796
好友
0
蛮牛币
2
威望
0
注册时间
2017-10-9
在线时间
89 小时
最后登录
2019-1-15
发表于 2018-11-6 13:42:49 | 显示全部楼层
谢谢分享

回复

使用道具 举报

排名
47495
昨日变化
21

0

主题

13

帖子

21

积分

Rank: 1

UID
297178
好友
0
蛮牛币
2
威望
0
注册时间
2018-9-15
在线时间
4 小时
最后登录
2019-1-10
发表于 2019-1-2 01:06:58 | 显示全部楼层
感觉不错的说

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表