[转]初心者向imagemap实例解说

阿咸

原帖地址
作者：jane_runs_fast

在Lemmasoft里已经有一些关于imagemap的代码了，不过对于一个Renpy小白我来说，这些东西让我搞一辈子才能明白到底说的是啥……

我希望通过分享自己的经验能让新人也能理解这个例子，它不是效率最高的实现方法，不过在我这儿是可行的，所以对大家来说应该也可以。

Imagemaps

Imagemap相比image button占更大空间，不过对新人来说它更加简单易于实现。

你需要这些东西：

• 三张相同的固定图像，格式为jpg或png。（所有内容都在一张图像上，不需要为每个按钮单独做一张图）
• “hostspot”的坐标。
• 让所有东西实现的代码。
  

首先我会给出这个imagemap中图像的例子并且解释。
然后我会解释“hotspot”以及怎么找到它们。
最后会给出这个例子中用到的代码。

以下我会用到不是我做的一个游戏的精灵（立绘）和背景作为材料。

imagemap菜单样例：

这是一张“底图”，当没有任何可用“Hotspots”时，图像看上去像这样。让你的“按钮”或者你想让人知道没有激活的区域变暗或者变淡。像这个图像中的“Read Story”区域，不起作用时它是暗灰的。

                               
登录/注册后可看大图

这是一张“悬停”图像。如果有可用“Hotspots”并且鼠标经过“hotspot”区域时图像就会看上去像这样。如果你想让用户鼠标经过时，你的“按钮”或区域变换颜色、形状或者其他什么的玩意儿，这就需要出现的那张图。比如我希望“Read Story”按钮变绿，其他按钮变粉红，就有了下图。

                               
登录/注册后可看大图

这是一张“空闲”图像，如果有可用的“Hotspot”但是鼠标没有“悬停”在可作用区域上图像就会这样。
在屏幕没有被点击（触摸）或没有交互时我们称为空闲状态。当我的游戏被放置时，我希望按钮是黑白色的。

                               
登录/注册后可看大图

现在你已经有了三张用作“Hotspot”的图像。

Hotspots
Hotspots是一些长方形或正方形（我知道可以做出其他形状但是我，不会）定位的范围可以使图像上的这个区域变为“可点击”。

我这儿用的坐标系依次为：
“X坐标”，“Y坐标”，“高度”，“宽度”。

找到 X 和 Y

X 和 Y 坐标确定的点是你想实现Hotspot区域的左上角。

比如我想得到菜单“Read Story”按钮的x y 坐标。确切的位置是 “Read Story”按钮的左上角。其他任何位置将会使你的Hotspot偏移。

你可以用任意绘图软件找到这个x和y的值，不过最可靠的方法还是使用Renpy的“developer keys”进入开发模式。

我将会演示如何在游戏中找到x 和 y 值。

首先你得把三张图片（底图，空闲和悬停图）放在game文件夹下的images文件夹。

现在打开renpy并且启动你的工程（就是有刚才那三张图的工程）

当你进入游戏后，键盘上按下“SHIFT”和“D”，打开开发者模式。（译者注：关掉输入法里的中文输入或者切换到英文输入法）

                               
登录/注册后可看大图

现在你可以看到开发者菜单了，应该如下图显示。

点击“Image Location Picker”选项。

                               
登录/注册后可看大图

会出现一个新窗口，里面有一堆游戏中的图片。

                               
登录/注册后可看大图

冷静

一开始可能会令人绝望，特别是你有超多图片的时候。不过现在有了过滤器可以搜索图片名称，接下找到我们的三张菜单图片，点击其中一个就会弹出一张图。

随着你的鼠标移动屏幕左下角会出现一组Mouse Position数值，这两个数字就是你鼠标当前的坐标。

现在我们将鼠标放到你想让它变成Hotspot区域按钮的左上角。准确的x和y坐标将会显示在画面左下角。（下图黄色高亮部分）

                               
登录/注册后可看大图

如果你还想要区域的高度和宽度
（还是基于这个按钮来解说）

按住鼠标左键（如果你惯用左手那就是右键）然后拖动至按钮右下角。屏幕上将会出现一个浅蓝色的长方形区域。

当你确定好这个区域了以后，松开鼠标左键。

坐标参数都会显示在renpy屏幕左下角，随时准备拿来使用了。

                               
登录/注册后可看大图

现在你已经得到了 x 和 y 坐标值。（下面的代码将会演示在哪里使用）

以下是我使用的代码——我将使用imagemap替换navigation screen中的内容。

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

# Navigation screen ###########################################################
##
## This screen is included in the main and game menus, and provides navigation
## to other menus, and to start the game



#### "###" 用来注释…… ####


screen navigation():
###首先“screen navigation”（据我所知）是用来做“菜单”的……里面有一些命令和动作（不能同时使用“labels”）
###如果想知道更多请谷歌‘renpy screen commands’。

    
# 开始制作按钮
    imagemap:

#所有代码必须严格按照要求缩进，不然你一启动马上get一个报错#
        
        idle "group_idle.png"
        hover "group_hover.png"
        ground "group_ground.png"
        
#^^^这里你将加入要使用的图像名称。我的图像名称为 group_idle.png、 group_hover.png、 和group_ground.png....
###你应该把名字替换成你自己图像的名称。注意要在图像名称外面加上（""）号（半角引号）。
###如果图片在game目录下面的子目录中，你应该加上目录名称，比如在game目录下有个mainmenu目录，
###声明idle图像时我们应该写作"mainmenu/group_idle.png"。



       
        hotspot (647,556,542,129) action ShowMenu('start')
        #hotspot (647,556,542,129) action Show('charchoicea')
        hotspot (656,375,140,143) action ShowMenu('load')
        hotspot (845,376,140,143) action ShowMenu('gallery')
        hotspot (1002,367,176,150) action Show('mail_main')
    
        #hotspot (1199,35,1248,88) action Quit('quit')
        
        
##############################################################
#############################################################

                               
登录/注册后可看大图

这个例子非常粗糙，不过实现起来很简单。谷歌真是个好东西，每次我搞不定的时候我就在lemmasoft或者谷歌里搜“renpy不拉不拉”……

小莞尔233

谢谢楼主w
战略mark！