页游戏开发教学：小猪存钱罐（1）界面和LOGO制作

页游戏开发教学：小猪存钱罐（1）界面和LOGO制作

01. 小猪存钱罐制作思维概述：

在一款游戏里面，死亡惩罚是一项几乎必不可少的设定，我们开发游戏也不例外，而且更加变态！在游芯站点的页游上面，难度几乎和只狼相媲美，只不过渣到没有画面只有文字。毕竟这只是页游，还是不要对画面要求太高的好。

在整体的玩家 页游戏体验中，游戏币损失究竟有多严重，我们来了解一下游芯沙盒的掉币设定，在一个 站中任何地方任何页面都有可能遭遇掉币事件，而且玩家中分为平民百姓和黑道份子两种，黑道份子可以在任何时间对你进行打劫！打劫是个什么概念？就是多取你的游戏币而且是按照百分比被打劫。也就是说玩家随时有可能被人抢的连灰渣都不剩。

我们在这种游戏环境的背景前提下，存钱就成为了刚需，我们需要为玩家开发一款能够存钱又能给 站带来实际收入的应用功能，存钱刻不容缓，但又不能永无休止，所以我们决定开发一款”小猪存钱罐”小程序。

02. 功能描述：

小猪存钱罐程序一个罐子可以存部分泰铢（ 站货币），需要使用泰铢取回则需要打破存钱罐子，单个罐子是固定的大小，不可升级扩容，罐子总共有两种规格，一种是普通小猪存钱罐，每个罐子售价为20泰铢，可存储500泰铢。另一种是水晶小猪存钱罐（飞猪存钱罐），每个罐子180泰铢，能够存储5000泰铢。两种罐子玩家可以自由购买。

每人家设仓库，每个仓库能够存放2个罐子（初始值），如果需要更多罐子就需要升级仓库，仓库初始为1级每级设定升级经验（经验为当前等级*100点），等级上限为20，仓库经验按照打破罐子的存储百分比获得，水晶罐子装到100%打碎直接获得100经验，普通小猪存钱罐，装满砸掉只能获得10%经验

03. 界面设计图

基本设计就是常规的软件形态，我们根据HTML和CSS的布局规范一步步来实现小猪存钱罐的界面就可以了。

04. 功能入口LOGO设计进行中…

我们的设计软件是Adobe的著名软件Fireworks CS6，用什么软件其实都不重要，主要的就是扣好图就行哈哈。

软件打开以后先新建一个文档不用太大200*200像素就行

接着就是粘贴进来我们的飞猪截图，至于截图没有规定什么特定的游戏去接取，甚至是度娘一个猪也行。载入了素材后用魔术棒工具（如果不太会用可以留言，我会专门做一期使用这个软件的文章）选中外围云彩，然后直接删除，可能会剩下一部分色差比较大的云彩，不过不要紧，可以用套索或者性状选框选中删除即可。

当我们吧图片扣的只剩下一个飞猪的时候，我们把他放大两倍，制作成一个240*240的方形图标即可，至于为什么我使用的240*240那是以为我的入口界面全是这么大的图标，如果你不是这个尺寸你可以自行修改，贴合你自己 站的风格即可。

做好后到处切片图片即可，你们在这当中会看到导出切片的选项，导出的切片不是很好用，所以不要选择直接导出切片。我们正常的只使用图片就可以了。CSS部分的程序我们不能偷懒，投机取巧是不会有好结果的。

导出后我们将图标放到我们INDEX的IMG目录下面编 25 （根据你们的目录自行调整路径）下面就是程序部分的工作了。我们选择一个目标去改这部分代码就可以。

这就是我们要修改的目标代码段了，我们将最后文件的指向 00.png 修改为 25.png就行了，然后吧alt参数中的文本进行替换。

代码段:

<div class="layui-col-xs3 layui-col-sm2 layui-col-md1 layui-col-lg1"> <div onClick="location='plugin.php?id=zgxsh_trc:index';"> <img src="source/plugin/zgxsh_trc/template/img/index/25.png" alt="小猪存钱罐" width="100%" height="auto"/> </div></div>

全部修改完成后会出现下面的效果了。完美的融入了主界面，虽然和豪猪王（原 站玩家-现在为游戏管理员）相比差的太远，但是还好能看。

下期预告：下期我们会开始写小猪存钱罐的首页。