找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 11452|回复: 1

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

[复制链接]
发表于 2018-6-2 17:10:05 | 显示全部楼层 |阅读模式

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

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

×
本帖最后由 阿咸 于 2018-6-2 17:17 编辑

原帖地址
作者: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不拉不拉”……



评分

参与人数 2干货 +6 收起 理由
被诅咒的章鱼 + 3 感谢分享!
BuErShen + 3 感谢分享!

查看全部评分

发表于 2018-6-12 23:10:21 | 显示全部楼层
谢谢楼主w
战略mark!
回复 支持 抱歉

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-12-3 21:57 , Processed in 0.115048 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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