首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
pixi&animation
订阅
Jansing
更多收藏集
微信扫码分享
微信
新浪微博
QQ
11篇文章 · 0订阅
[开盖即食]基于canvas的“刮刮乐”刮奖效果
微信小程序抽奖组件,这是一个基于canvas的刮刮乐效果,改进了之前流传在网上的一些方法,做了一些兼容性。
开心消消乐游戏算法基础版
我们经常看到各类的消除游戏,最近玩了两把消消乐,有想着来理解下其中的规则,市场上主流的是地图型的,几乎是无尽模式,各种消除特效,各种各样的过关方式,玩起来还是不错的,就是遇到比较难的关卡,要多试几次,运气非常好的时候就过了,不然卡死。 由于篇幅关系,本章只会讲解生成地图的算法,…
基于 pixi.js 开发H5游戏黄金矿工
这次的H5游戏是做在支付宝小程序中的,支付宝小程序官方并没有建议使用什么样的方式亦或是什么样的物理引擎去开发游戏相关内容,当然它也提供了Canvas的能力,如果使用原生canvas的能力去做,你就不可避免的需要处理图层,纹理,精灵图,Ticker,元素碰撞,动画时间轴,资源加载…
学习 PixiJS — 小精灵冒险
小精灵冒险 是 Learn Pixi.js 一书中最后一个案例。点击屏幕让小精灵飞起来,小精灵上升时,会拍打翅膀,并且会有小星星产生。如果她撞到柱子上,她会爆炸成一堆小星星。帮助她通过15个柱子的间隙到达终点,界面会显示一个巨大 Finish 标志。 还记得 学习 PixiJS…
学习 PixiJS — 碰撞检测
碰撞检测,用来检查两个精灵是否接触。 Pixi 没有内置的碰撞检测系统, 所以这里我们使用一个名为 Bump 的库,Bump 是一个易于使用的2D碰撞方法的轻量级库,可与 Pixi 渲染引擎一起使用。它提供了制作大多数2D动作游戏所需的所有碰撞工具。 变量 b 现在代表 Bum…
学习 PixiJS — 补间动画
补间动画指的是,我们可以通过为精灵的位置、比例、透明度,等属性,设置开始值和结束值,制作动画,动画中间需要的部分由软件自动计算填充。 Pixi 没有内置补间引擎,但是你可以使用很多很好的开源的补间库,比如 Tween.js 和 Dynamic.js 。如果要制作非常专业的自定义…
所有前端都要看的2D游戏化互动入门基础知识
背景 现在越来越多的公司和APP开始使用游戏化的方式去做产品了,所谓游戏化,是指在非游戏环境中将游戏的思维和游戏的机制进行整合运用,以引导用户互动和使用的方法。支付宝里面的蚂蚁庄园、蚂蚁森林,通过游戏
learn PIXI.js之补充
以下是学习learn PIXI.js这本书的学习笔记,也是对我前一篇文章的补充——pixi的使用之创建和操作精灵,主要是个人读书笔记性质,为以后参考之用。本文是本人阅读并翻译原版书籍而来,原著虽短且浅,但翻译终归枯燥,断断续续花了我不少时间,如有对读者有所帮助,幸甚至哉。 我也…
原生JS实现抛物线动画以及动态模糊效果
某一天我收到了产品发来的微信消息。小X,我们的业务现在需要一个类似加入购物车的掉落动画,经过组织的慎重考虑,这个需求就交给你了。于是便有了这篇文章。本文并没有描述多少高深的技术,更多的是一些笔者在做动画时对动画原理的思考以及如何优化动画的一些思路。实现效果如下: 前端实现动画的…
学习 PixiJS — 粒子效果
你如何创造火,烟,魔法和爆炸等效果?你制作了许多小精灵,几十,几百,甚至上千个精灵。然后对这些精灵应用一些物理效果,使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子。你可以使用它们为游戏制作…