Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/journey-ad/slime-pixi
使用 PIXI.JS 复刻的原神史莱姆乐园活动
https://github.com/journey-ad/slime-pixi
pixi-js pixi-spine tweenmax
Last synced: about 1 month ago
JSON representation
使用 PIXI.JS 复刻的原神史莱姆乐园活动
- Host: GitHub
- URL: https://github.com/journey-ad/slime-pixi
- Owner: journey-ad
- License: mit
- Created: 2021-01-24T13:22:57.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-25T08:13:52.000Z (almost 4 years ago)
- Last Synced: 2023-03-05T08:19:21.834Z (almost 2 years ago)
- Topics: pixi-js, pixi-spine, tweenmax
- Language: JavaScript
- Homepage: https://lab.getloli.com/slime-pixi/
- Size: 11.6 MB
- Stars: 27
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 史莱姆乐园 - PIXI.JS实现
使用 PIXI.JS 复刻的原神史莱姆乐园活动~~私服~~ [Demo](https://lab.getloli.com/slime-pixi/)
## 技术栈
- Vue.js
- Pixi.js
- Pixi Spine
- GSAP(TweenMax)
## 复刻进度
- [x] 主场景
- [x] 装饰品
- [x] 来访客人
- [x] 史莱姆
- [ ] 雪山点击动画
- [ ] 动画 bug
- [ ] 优化体验
## 原项目
[https://webstatic.mihoyo.com/ys/event/e20210122-slime/index.html](https://webstatic.mihoyo.com/ys/event/e20210122-slime/index.html)
#### 加载页面样式来源
[https://codepen.io/wabeshew/pen/XdbBdM](https://codepen.io/wabeshew/pen/XdbBdM)
## 参考
[如何选取合适的前端动效方案？](https://juejin.cn/post/6844903830094610446)
[webGL动画](https://www.cnblogs.com/Unknw/p/6689176.html)
[H5场景小动画实现之PixiJs实战](https://zhuanlan.zhihu.com/p/31293136)
[Zainking/LearningPixi](https://github.com/Zainking/LearningPixi)
[pixijs/pixi-spine](https://github.com/pixijs/pixi-spine)
[TweenMax中文手册](https://www.tweenmax.com.cn/api/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](https://cli.vuejs.org/config/).