史莱姆乐园 - PIXI.JS实现

使用 PIXI.JS 复刻的原神史莱姆乐园活动私服 Demo

技术栈

• Vue.js
• Pixi.js
• Pixi Spine
• GSAP(TweenMax)

复刻进度

• 主场景
• 装饰品
• 来访客人
• 史莱姆
• 雪山点击动画
• 动画 bug
• 优化体验

原项目

https://webstatic.mihoyo.com/ys/event/e20210122-slime/index.html

加载页面样式来源

https://codepen.io/wabeshew/pen/XdbBdM

参考

如何选取合适的前端动效方案？

webGL动画

H5场景小动画实现之PixiJs实战

Zainking/LearningPixi

pixijs/pixi-spine

TweenMax中文手册

免责声明

本项目仅为学习 Pixi.js 和 Spine 骨骼动画编程所用

源码中包含的 Spine 动画资产版权为米哈游公司所有，不得出于商业目的或提供付费支持服务而复制或传播此出版物的任何部分，由此造成的一切后果本代码仓库建立者概不负责

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.