RenPy中文空间

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 176|回复: 4

[已解决] 如何定义和生成瓦片地图TileMap?

[复制链接]
发表于 2019-7-12 15:43:55 | 显示全部楼层 |阅读模式

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

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

x
renpy如何使用少量小方块图片,比如 棕色方块 land.png  绿色方块 tree.png  蓝色方块 river.png,生成丰富组合的大地图?
如何定义?
如何生成?
#####################
注释:
在游戏开发过程中,会遇到超过屏幕大小的地图,例如在即时战略游戏中,它使得玩家可以在地图中滚动游戏画面。这类游戏通常会有丰富的背景元素,如果直接使用背景图切换的方式,需要为每个不同的场景准备一张背景图,而且每个背景图都不小,这样会造成资源浪费。

瓦片地图就是为了解决这问题而产生的。一张大的世界地图或者背景图可以由几种地形来表示,每种地形对应一张小的的图片,这些小的地形图片为瓦片。把这些瓦片拼接在一起,一个完整的地图就组合出来了,这就是瓦片地图的原理。

在 Cocos2d-x 中,瓦片地图实现的是 TileMap 方案,TileMap 要求每个瓦片占据地图上一个四边形或六边形的区域。把不同的瓦片拼接在一起,就可以组成完整的地图。 ……


发表于 2019-7-13 23:54:57 | 显示全部楼层
https://blog.fooleap.org/merge-tiles-with-python.html
这里面有大概方法,我在pyCharm上跑了下是可用的,在renpy中能力有限搞不好,你需要可看下
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2019-7-14 21:14:58 | 显示全部楼层
使用 Python 合并瓦片图
2018 年 04 月 01 日 17:49 本文 2090 字,阅读全文约需 6 分钟
高分辨率图片由于体积过大,并不适合直接在浏览器等直接查看,于是就有了瓦片图。一张大图往往是使用很多瓦片组成,最常碰到的莫过于各种 Web 地图。

OpenSeadragon 是一个可以实现在 Web 轻松浏览高分辨率图片的 JS 库,有不少展示艺术品图像或摄影欣赏的网站使用[1]。前几天,碰到一个网站便是使用这个强大的库,想看的图片并没有提供原图下载,在线查看最大分辨率图片感觉挺大的,就想弄下来看看。

下载瓦片图
简单研究了下,OpenSeadragon 就跟地图一样,大图也是由很多相同分辨率的小图所组成的。若想要扒一张大图下来,也就是得把所有小图都下下来,然后再进行合并操作。

瓦片图下载是个问题,图片放大到最大级别。浏览器按 F12,一看瓦片图资源的命名方式,感觉还是不难的。3_2.jpg、15_6.jpg,看这样的文件名,可推断出第一个数字可能是横坐标,第二个数字是纵坐标,即 x_y.jpg 的命名方式,再看瓦片图的分辨率。只要再知道最大图的分辨率,便可以把所有瓦片图的链接都弄出来。

下面以 OpenSeadragon 官网[2]的示例图为例,把瓦片图扒下来。在 F12 工具里面,可以很方便的找到上面三个参数,瓦片图前缀、瓦片图分辨率及图片原分辨率。

瓦片图前缀、瓦片图分辨率及图片原分辨率▲ 瓦片图前缀、瓦片图分辨率及图片原分辨率
顺便直接写段脚本把所有瓦片图链接保存起来。

function downloadTiles(width, height, prefix) {
    var x = parseInt(width / 256 + 1);
    var y = parseInt(height / 256 + 1);
    var output = '';
    for(var i = 0; i < x; i++){
        for(var j = 0; j < y; j++){
            output += (prefix + i + '_' + j + '.jpg\n');
        }
    }
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(output));
    element.setAttribute('download', 'tiles.txt');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}
downloadTiles(13920, 10200, 'https://openseadragon.github.io/example-images/duomo/duomo_files/14/')
再之后,使用 aria2 便可快速下载。

aria2c -i tiles.txt
两千多张瓦片图,不是个小数目啊!那应该如何把瓦片图合并呢?

合并瓦片图
想到合并图片,我最先想到的是 Python,虽然我还没有写过。一番挣扎之后,合并的脚本也有了,写上些注释,废话就不多说了。

#!/usr/bin/env python
#coding=utf-8
import glob
import re
from PIL import Image

# 列出所在目录下所有 JPG 图片,并按 x_y.jpg 先 x 后 y 序数排序。
files = glob.glob('./*_*.jpg')
files.sort(key=lambda x: tuple(int(i) for i in re.findall('\d+', x)[:2]))

# 创建字典 {0:{'./0_0.jpg','./0_1.jpg'...}, 1:{'./1_0.jpg','./1_1.jpg'...}}
imagefiles = {}
for item in files:
    match = re.search(r'\d+', item)
    pre = int(match.group())
    if not imagefiles.get(pre):
        imagefiles[pre] = []
    imagefiles[pre].append(item)

# 原图片宽高,每张瓦片图都是 256 * 256,就不多费事
total_width = len(imagefiles) * 256
total_height = len(imagefiles[0]) * 256

# 创建原分辨率的空白图片
new_image = Image.new('RGB', ( total_width,total_height ))

# 按列依次粘贴进刚创建的图片
x_offset = 0
for item in imagefiles:
    y_offset = 0
    images = map(Image.open, imagefiles[item])
    for subitem in images:
        new_image.paste(subitem, (x_offset, y_offset))
        y_offset += subitem.size[0]
    x_offset += images[0].size[0]

# 保存图片
new_image.save('merge.jpg', quality = 90)
参考资料
^ OpenSeadragon in the Wild
^ OpenSeadragon
本文历史

2018 年 04 月 01 日 完成初稿
回复 支持 反对

使用道具 举报

 楼主| 发表于 3 天前 | 显示全部楼层
本帖最后由 jiangjie1981 于 2019-8-23 12:10 编辑

今天想通了一个关键问题:如何重复使用同一个地块图片。
很简单,把同一个图片重复定义image多次,起的名字不同。则同一个地块图,也可以反复使用。
但不能把定义的一张图,用到地图不同坐标位置,这样会使得这一个图在挪动,而非重复贴图。

注意pic_1要有下划线,不能是image pic 1

[RenPy] 纯文本查看 复制代码

image pic_1 = "map_tile.png" 
image pic_2 = "map_tile.png"
################
show pic_1 at left
show pic_2 at right



回复 支持 反对

使用道具 举报

发表于 3 天前 | 显示全部楼层
Ren’Py引擎必学 —— 界面和界面语言 :https://www.renpy.cn/doc/screens.html
[RenPy] 纯文本查看 复制代码
# 游戏的脚本。

image a1 :
    "#330099"
    size(100,100)
 
image a2 :
    "#ffff33"
    size(100,100)
 
image a3 :
    "#ff0000"
    size(100,100)
############################
screen BBB():
## 1
    vbox:# 垂直
        xpos 0.1
        add "a1"
        add "a2"
        add "a3"
## 2
    hbox:# 水平
        xpos 0.3
        add "a1"
        add "a2"
        add "a3"
## 3
    grid 2 3: ## 网格
        xpos 0.6
        add "a1"
        add "a1"

        add "a2"
        add "a2"

        add "a3"
        add "a3"

## 4
    hbox:
        pos (0.3,0.3)
        vbox:
            add "a1"
            null height 10 #空区域的[高度],单位是像素。
            add "a2"
            null height 10 #高度
            add "a3"

        null width 10 # 空区域的[宽度],单位是像素。
        vbox:
            add "a1"
            null height 10 #高度
            add "a2"
            null height 10 #高度
            add "a3"

        null width 10 #高度
        vbox:
            add "a1"
            null height 10 #高度
            add "a2"
            null height 10 #高度
            add "a3"

    textbutton "结束" pos(0.5,0.9) action MainMenu(confirm=True)

# 游戏在此开始。
label start:

    call screen BBB()

    # 此处为游戏结尾。
    return

或用开源软件:Tiled

官网:https://www.mapeditor.org
功能非常强大!支持你设计好的瓦片地图并导出成图。


回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|RenPy中文空间 ( 苏ICP备17067825号 | 苏公网安备 32092302000068号 )

GMT+8, 2019-8-26 01:49 , Processed in 0.102866 second(s), 22 queries , File On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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