麦步社区-论坛

标题: 【小白教程】不会代码如何修改表盘 [打印本页]

作者: 手残也要作 时间: 2016-10-31 21:31
标题: 【小白教程】不会代码如何修改表盘
本帖最后由手残也要作于 2016-10-31 21:32 编辑

相信有很多人都在尝试制作自己的表盘，我也是其中之一。
最开始什么都不懂，什么的做不了，还没怎么弄就报错了，一直折腾但却无法完成一款表盘。
电气猫的初级教程给了我第一个梯子，让我走上了自制表盘的道路。
——————————————————————————————————————
于是我完成了第一个真正意义上的表盘：
[attach]3597[/attach]
摆造型表盘，我真正能上传到商城的第一款表盘，当时为了制作成功操碎了心，调试了很久，光修改UUID就耽搁了1天多才成功。
可以看出这款表盘很粗糙，只有时间和日期。
——————————————————————————————————————
同一款代码，大改背景，数字反色，就有了下面的3款表盘：
吃货日记→触不到的恋人→金刚狼表盘
[attach]3598[/attach][attach]3600[/attach][attach]3602[/attach]
——————————————————————————————————————
仍然是那款代码，不在意背景，只修改数字，旧瓶换新酒，我又制作了如下表盘：
砖块数字→方砖数字
[attach]3604[/attach][attach]3606[/attach]
——————————————————————————————————————
仍然是那款代码，删除日期，只留数字，就又有了一下表盘：
柯南看板→斜体数字→斜体数字0.2
[attach]3610[/attach][attach]3608[/attach][attach]3609[/attach]
——————————————————————————————————————
以上都是从电气猫推荐的十字绣表盘衍生而来的表盘，几乎我90%的表盘都是同一套代码。
难以置信吧，事实就是如此，我就是用一个代码做出了9款表盘，集齐9款表盘都可以召唤神龙了。
说实话，在还没找到更好的代码时，我会用这一款代码制作更多的表盘。

作者: 手残也要作 时间: 2016-10-31 22:15
本帖最后由手残也要作于 2016-10-31 22:22 编辑

进入正题，让我来给众小白讲解下制作一款表盘需要的步骤：
1、安装编译器和模拟器，这个我就不赘述了，1楼点击链接看电气猫的帖子。
2、制造表盘需要的文件类别，下面是具体模拟器目录下你必须注意的几个文件。
[attach]3611[/attach]
模拟器目录：这个不多说，每个人安装的地方不一样，看个人情况而定，不过最好是路径的文件名都是英文。
模拟器EXE：大家都知道表盘调试必须用到的软件，虽然简陋了点，但没有它你是无法制作表盘的。
下面是跟表盘制作密切相关的4中文件了：
表盘用户数据：appinfo.json，主要由uuid、表盘名称、版本号、表盘所需图片等组成，建议用专门的编译软件修改，因为我最开始用电脑自带的记事本修改后经常报错，所以最后下载了Notepad++，用Notepad++修改后就再也没有报过错了。
表盘源码：watchface_bricks.c，只要是后缀为.c的都是源码，表盘代码不可缺少。
表盘文件夹：resources，一般存放文字、图片或其他代码。
表盘安装包：OUT.MAI或者OUT.MWP，我们自己制作的后缀是.MAI，官方老版本的制作出来后缀是.MWP。
3、构思表盘找匹配的现成代码，以砖块数字为例。
我用了十字绣表盘的代码，先下载好源码数据包。
[attach]3612[/attach]
可以看到下载好的源码有表盘用户数据、表盘源码、表盘文件夹、表盘安装包以及成品展示图，个人建议附上成品展示图，我制作完成后的源码数据包如下：
[attach]3613[/attach]
我除了成品展示图还增加了手表展示图，这样就更加直观了，制作好的源码数据包需要将其压缩后传给工作人员SunJunyou，QQ：693622543。
4、上传表盘安装包到商城，
登陆开发者平台，根据步骤一步一步完成上传，等待工作人员审核后就会出现在商城里了。

作者: 手残也要作 时间: 2016-10-31 22:20
本帖最后由手残也要作于 2016-11-1 16:09 编辑

进入前期准备工作，绘制自己的表盘素材：先来看看十字绣表盘的原有素材如下：
主要分成三部分时间数字0~9，日期数字0~9和表盘背景图。
[attach]3627[/attach]
然后是我自己的构想，做立体的砖块数字，下面是我画的数字草图：
上面是时间，下面是日期，且两者用同一组数字。
[attach]3628[/attach]
总结下来我只需要画一组0~9的砖块数字，并加上一张白底背景图，一共11张图。
先展示下我画好的成品素材图组：
[attach]3629[/attach]
——————————————————————————————————————
接下来是绘画技巧了，根据我那粗糙的草图，便着手绘制数字，对于这种立体数字的绘制，我采用了积木拼贴法绘制。
1、构思出一组3*5的立方体，绘制出其中的一个小立方体部件。
2、通过空间想象用小立方体拼贴出0~9的砖块数字，去掉多余的线条，完成数字。3、完成所有数字后，将所有数字按统一尺寸剪切并保存成单个1深度BMP文件，不知道怎么保存成1深度，跳转【教程】用PS将bmp图片深度转换成1。
[attach]3630[/attach]
然后是绘制背景图，有人会问白底背景还要画啊，那不是白瞎么，众位看了我画好的素材图会发现背景图居然不是纯白色。
其实那是我用数字素材摆放好后专门用来定位用的，只要位置不对，那么挖的洞就不会被完全遮盖住。
[attach]3631[/attach]
素材准备工作告一段落，接下来是代码相关内容。

作者: 手残也要作 时间: 2016-10-31 22:20
本帖最后由手残也要作于 2016-11-1 17:54 编辑

首先是修改表盘用户数据，我用Notepad++打开十字绣表盘的appinfo.json效果图如下：
[attach]3632[/attach]
UUID：必须通过开发者平台申请的一串表盘身份数字。
表盘名称：根据实际情况随便取的名称。
图标引用项：制作表盘时可以不管它，制作软件时就必须注意了，后面引用的就是“新表盘素材命名”中的“图片素材代码引用名”，软件列表中的小图标你引用了哪个，它就显示哪个。
版本号：无关紧要的项目，如果你是完美主义者，特别注意也是可以的，它会显示在商城中。
表盘类型：只有true和false两个单词可填，前者表示这是表盘，后者表示这是软件。
表盘素材命名：就是将表盘文件夹resources里面的所有图片素材都重新声明一遍，每张图片由三项要素：图片类型、代码引用名和原文件名。
图片类型：只能是BMP格式。
代码引用名：就是在代码中会用到的引用的名称符号。
原文件名：就是表盘文件夹resources里面的所有图片素材的文件名称。
——————————————————————————————————————
1、先登录开发者平台，点击创建麦步app。
[attach]3633[/attach]
2、点击申请UUID，申请制作一个表盘的身份号码。
[attach]3634[/attach]
3、输入表盘名称，选定表盘类型，是表盘就选表盘，是软件就选软件。
[attach]3635[/attach]
4、申请UUID成功，下面是砖块数字的UUID，将其复制到你要修改的appinfo.json中。
[attach]3636[/attach]
5、接下来是修改appinfo.json文件：
我修改了画框的部分，UUID是复制的上面重新申请的，名称改成了砖块数字，最下面的图片声明里面删除了多余的日期数字0~9。
[attach]3637[/attach]
6、将十字绣表盘源码数据放入模拟器目录下。
模拟器相关功能太简陋了，就不赘述。
[attach]3638[/attach]
7、下面进入代码修改：
我用图片进行对比给大家看个仔细：
首先是抬头部分
[attach]3639[/attach]
然后是图片数据部分
[attach]3640[/attach]
先看所有图片的坐标：
ORIGIN_X表示图片X轴坐标
ORIGIN_Y表示图片Y轴坐标
ORIGIN_H表示图片高度
ORIGIN_W表示图片宽度
顺序依次是：背景图片+4个时间数字+4个日期数字
这个就必须根据实际情况来调整填写了，个人建议将每列的数字对齐便于观看修改。
然后是图片引用：
可以看出我将日期部分的0~9数字复制成了时间部分的0~9数字，里面引用的都是appinfo.json文件夹里面声明好的代码引用名。
8、模拟器代码测试，利用快捷键Ctrl+M不断测试调试看结果。
在主程序中添加simulator_init();和simulator_wait();代码用于测试效果。
如下图加入//或者/* */等注释符号的就是撤销了代码效果，去掉这些符号就可以开始测试了。
[attach]3641[/attach]
9、打包表盘安装包，利用快捷键Ctrl+P进行打包，从而获得表盘安装包OUT.MAI。
在加入//或者/* */等注释符号撤销了代码效果的情况下就可以打包了。
10、手表效果测试，利用QQ传表盘安装包到手机APP中手动安装就可以看到手表效果了。
不会的可以查看教程 - 如何安装.MAI格式的表盘。

作者: 手残也要作 时间: 2016-10-31 22:21
本帖最后由手残也要作于 2016-11-1 18:13 编辑

商城上传步骤：跳过申请uuid和复制uuid这两步骤，进入第三步上传安装包：
[attach]3644[/attach]
填写内容不用教，大家都会，手表界面截图可以在模拟器测试效果时用QQ截图直接截取128*128的界面图。
[attach]3645[/attach]
直接上传表盘安装包OUT.MAI即可。
如果uuid不是前面申请的就会出错，请替换了UUID后重新测试并打包出对应的OUT.MAI才行。
如果出现一直在验证的情况，请清空浏览器的历史浏览数据再次尝试上传即可。
[attach]3646[/attach]
上传完后，填写版本号之后将制作好的源码数据包压缩后传给工作人员SunJunyou，QQ：693622543。
源码数据包样式如下：
[attach]3648[/attach]

作者: 水月梦 时间: 2016-11-1 08:22
应该发表盘区才对，你可以用下我发的那个算盘表盘，那个代码有星期，时间，月份，还有上下午，秒针，用的是@aix 的源码，很好用。

我的启蒙贴也是电力猫

作者: cw2549 时间: 2016-11-1 13:04
PS： appinfo.json 这个文件可以改后缀文为.C 就可以用模拟器修改了，然后改回.json 就可以了

作者: 时间 时间: 2016-11-1 13:36
appinfo.json出错是因为表盘名要是用中文的话，需要把文本的编码切换成UTF-8，
官方demo的appinfo.json的表盘名大多都是英文，所以直接在上面修改的话生成表盘的时候，表盘名显示是乱码。

作者: 步往康来 时间: 2016-11-1 13:55

cw2549 发表于 2016-11-1 13:04
PS： appinfo.json 这个文件可以改后缀文为.C 就可以用模拟器修改了，然后改回.json 就可以了 ...

你这样岂不是太麻烦了? 直接就可以模拟的啊

作者: sure 时间: 2016-11-1 13:56
支持教程！！

作者: 步往康来 时间: 2016-11-1 13:59

手残也要作发表于 2016-10-31 22:15
进入正题，让我来给众小白讲解下制作一款表盘需要的步骤：
1、安装编译器和模拟器，这个我就不赘述了，1楼 ...

appinfo.json我都是直接在模拟器里内修改的

作者: niuniumm 时间: 2016-11-1 14:24
好帖，赞一个,顶楼主

作者: 手残也要作 时间: 2016-11-1 18:16
@酸汤宝表盘教程完成了，称述略啰嗦，不知道会不会看得烦

作者: cw2549 时间: 2016-11-1 18:19

步往康来发表于 2016-11-1 13:55
你这样岂不是太麻烦了? 直接就可以模拟的啊

修改.json 文件不能直接打开吧。

作者: 大王1989 时间: 2016-11-2 13:30
这些事情还是你们这些大神来做吧

作者: yuanquan72 时间: 2016-11-3 10:12
支持教程！！

作者: 酸汤宝 时间: 2016-11-4 20:41
哇塞。谢谢lz。。帮了大忙了

作者: 手残也要作 时间: 2016-11-4 21:09

酸汤宝发表于 2016-11-4 20:41
哇塞。谢谢lz。。帮了大忙了

希望你也能快速制作出自己的表盘

作者: 酸汤宝 时间: 2016-11-4 21:23

手残也要作发表于 2016-11-4 21:09
希望你也能快速制作出自己的表盘

我画了这么多0 0

作者: 手残也要作 时间: 2016-11-4 21:27

酸汤宝发表于 2016-11-4 21:23
我画了这么多0 0

只能有黑白2色哦！

作者: 酸汤宝 时间: 2016-11-4 21:33

手残也要作发表于 2016-11-4 21:27
只能有黑白2色哦！

对啊。我转以位的时候也是懵逼了。

作者: 酸汤宝 时间: 2016-11-4 21:35

手残也要作发表于 2016-11-4 21:27
只能有黑白2色哦！

有没有什么改图比较好的软件。ps 画这种马赛克的好难画

作者: 手残也要作 时间: 2016-11-4 21:49

酸汤宝发表于 2016-11-4 21:33
对啊。我转以位的时候也是懵逼了。

用系统自带的画图软件就可以解决啊，保存是选BMP单色模式

作者: 酸汤宝 时间: 2016-11-4 22:04

手残也要作发表于 2016-11-4 21:49
用系统自带的画图软件就可以解决啊，保存是选BMP单色模式

改好了0 0.心塞。为啥只有1位深啊

作者: 手残也要作 时间: 2016-11-4 22:08

酸汤宝发表于 2016-11-4 22:04
改好了0 0.心塞。为啥只有1位深啊

[attach]3752[/attach]
注意下像素绘画的技巧，线条越简越清晰哦。。。

作者: 酸汤宝 时间: 2016-11-4 22:14

手残也要作发表于 2016-11-4 21:49
用系统自带的画图软件就可以解决啊，保存是选BMP单色模式

貌似编译错了，估计是因为数组没改。 0 0但是我不会改啊

作者: 酸汤宝 时间: 2016-11-4 22:15

手残也要作发表于 2016-11-4 22:08
注意下像素绘画的技巧，线条越简越清晰哦。。。

但是0 0，图片也需要这样么。有的地方我觉得粗一点好看一点哎。

作者: 酸汤宝 时间: 2016-11-4 22:17

手残也要作发表于 2016-11-4 22:08
注意下像素绘画的技巧，线条越简越清晰哦。。。

我想起来了。我上次把环境变量删了

作者: 手残也要作 时间: 2016-11-4 22:31

酸汤宝发表于 2016-11-4 22:17
我想起来了。我上次把环境变量删了

我也是代码白痴，基本只改了图片相关的数组数据

作者: 酸汤宝 时间: 2016-11-4 22:34

手残也要作发表于 2016-11-4 22:31
我也是代码白痴，基本只改了图片相关的数组数据

我可以借你的那张实拍图用一用么

作者: 手残也要作 时间: 2016-11-4 22:36

酸汤宝发表于 2016-11-4 22:34
我可以借你的那张实拍图用一用么

哪个实拍图？拼装模型板件么？那个是网上随便搜的

作者: 酸汤宝 时间: 2016-11-4 22:46

手残也要作发表于 2016-11-4 22:36
哪个实拍图？拼装模型板件么？那个是网上随便搜的

我做好了哎。好棒哟。那个我发布了。就不用在论坛发布表盘了么。？

作者: 酸汤宝 时间: 2016-11-4 22:47

手残也要作发表于 2016-11-4 22:36
哪个实拍图？拼装模型板件么？那个是网上随便搜的

这个是效果图。

作者: 手残也要作 时间: 2016-11-4 22:54

酸汤宝发表于 2016-11-4 22:46
我做好了哎。好棒哟。那个我发布了。就不用在论坛发布表盘了么。？

随你，在商城发布了，需要在工作时间向麦步工作人员发源码包

作者: 手残也要作 时间: 2016-11-4 22:55

酸汤宝发表于 2016-11-4 22:47
这个是效果图。

不错，比我第一个表盘靠谱多了

作者: 酸汤宝 时间: 2016-11-4 22:58

手残也要作发表于 2016-11-4 22:55
不错，比我第一个表盘靠谱多了

http://bbs.maibu.cc/thread-1888-1-1.html你去看看我发的0 0有啥问题么。我没加你好友@不到你

作者: wx_AAlzVp9L 时间: 2016-11-7 20:10
受益匪浅

作者: mark 时间: 2016-11-9 18:22

手残也要作发表于 2016-10-31 22:21
商城上传步骤：跳过申请uuid和复制uuid这两步骤，进入第三步上传安装包：

填写内容不用教，大家都会，手表 ...

哥们，你太牛逼了。很用心啊。给32个赞。

作者: yuanquan72 时间: 2016-11-10 11:19
学习学习

欢迎光临麦步社区-论坛 (http://bbs.maibu.cc/)