Pixi探索记录

过年的时候朋友分享过来一篇网易荣格H5

https://azi.music.163.com/c/rongge_test/index.html
做的很漂亮,要研究研究实现原理
网易《荣格心理原型》,是今年我见过最棒的测试H5!

看js请求:

Pixi探索记录_第1张图片

逐个js搜索研究;
第一个:Pixijs,一顿搜索发现Pixijs挺强大,感觉都可以做H5小游戏了;

Pixi教程中文版(从零学习)
https://github.com/wangwenjie1314/LearningPixi

同时其借住于TexturePacker 工具可以更棒的处理素材;

通过这篇文章
How to create sprite sheets and animations for PixiJS
你可以学习了解到 精灵元素如何动起来

通过这篇文章
H5场景小动画实现之PixiJs实战
你可以学习了解到 Pixi如何实战到H5项目中

通过这篇文章
pixi.js 移动端H5坑点
你可以学习了解到 Pixi在H5项目中有哪些坑

第二个:
通过Scroller可以有效解决HTML和Canvas的滚屏,上面的实战文章也提到了Scroller,具体看github 不多做介绍
Scroller Accelerated panning and zooming for HTML and Canvas

第三个:
Tweeen 做一些页面中元素过渡动画,他可以很好的和Pixi精灵元素结合;
Tweenjs Animate

例如:
Pixi探索记录_第2张图片

看json、img请求

Pixi探索记录_第3张图片

生成分享图

Pixi探索记录_第4张图片
对应素材图:https://azi.music.163.com/c/rongge_test/images/end_text2/0.png

额外阅读:
借住howler.js 可以实现音频播放
howler.js Javascript audio library for the modern web

你可能感兴趣的:(javascript,pixi.js,html5,html)