轩_雨

青山不厌三杯酒,长日惟消一局棋
BongoCat_Mac(二)_自制贴图和自定义动画

前情提要

运行环境

  • macOS High Sierra系统 10.13.6
  • node v14.2.0
  • electron v8.0.0

项目

画自己的虚拟形象

虽然Bongo Cat有自己的虚拟形象,我还是画了一个新的,形象是参照《灵笼》的白老板画的。由于是鼠标画的,不是很精细,后面拿到我的数位板再改改吧。
稍微介绍下绘制过程。我是尽量按照制作live2d的流程来绘制的,方便后期改成live2d。

草稿

简单打个稿。我用的是Photoshop CC 2017,主要是macOS安装不了SAI,如果觉得Photoshop不适合绘画的话macOS可以用MediBang Paint,至少防抖还是不错的。

image-20211003214005269

分层细化

下面是我Photoshop的图层,围巾后来没有画,就改成衣服了。

image-20211003215901852

这个是分层效果,画技一般,看看效果就行。

白老板

动作绘制

因为角色需要根据我们的按键行为做出相应操作,所以需要把左右手的关键动画帧画出来。好吧,其实也就只有关键帧,中间一点过渡效果都没有,后面再改改吧。下面是图层。

image-20211004005355758

然后这是效果,这手是直接自由变换的,没有重新画,形变有点严重。

白老板2

动画播放方案

bongo.cat 的动画播放策略

bongo.cat 的动画播放策略和哔哩哔哩返回顶部的那个动画策略是一样的。

img

都是通过修改background-position-x来达到播放动画的效果。Bilibili还用修改背景图片的background-position的方法还达到了抖动的效果。

看一下bongo.cat的动画。他是通过修改background-position-y来修改主题,也就是黑/白猫,修改background-position-x来播放动画,也就是抬手/按下。

img

我的动画播放策略

我没有实际去测过插入gif、修改背景图片的background-position-x和控制dom元素的显隐这三种方法的效率。所以不推荐任何一种播放动画的方法,如果有比较了解的伙伴可以沟通交流一下。

最后我也模仿了bongo.cat的播放策略,把手部拼成一个横向长图,用于播放。其他部分暂时没有动画效果就先合成一个图吧。

image-20211004194531428

动画播放效果

我拿疯狂小人大乱斗这个游戏来展示一下结果。想要看效果的可以下载项目尝试。

git clone http://gitee.com/xuanyusan/bongocat_for_mac.git
cd bongocat_for_mac
npm install
# 因为我已经在package.json配置好了,所以顺利的话不用rebuild,不顺利的话就参照上一篇教程改install.js文件吧
# 如果安装失败,记得rebuild一下
npm start

4

posted on 2021-10-06 11:31  轩_雨  阅读(1302)  评论(1编辑  收藏  举报