Skip to content

J
JsxForFYGETemplate
Commit c05d2240 authored by Master Q's avatar Master Q
Browse files
Options

动效完善

parent ee62695e
Hide whitespace changes
Inline Side-by-side
Showing with 338 additions and 268 deletions
index.html
View file @ c05d2240
......@@ -70,7 +70,7 @@
canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
new Main(canvas, {
isFirstGame: true
isFirstGame: false
})
})
......
resource/res.json
View file @ c05d2240
......@@ -11,6 +11,14 @@
{
"keys": "closebtn.png,giftBoxIcon.png,waitingBg.png,waitingRot.png",
"name": "common"
},
{
"keys": "rabbit0.spi",
"name": "spine"
},
{
"keys": "SpBoom.svga,boomSvga.svga,spSvga.svga",
"name": "svga"
}
],
"path": "./resource/"
......
scripts/rabbit/rabbit.atlas
View file @ c05d2240
tuzi跳.png
人物.png
size: 256,256
format: RGBA8888
filter: Linear,Linear
repeat: none
erdy
rotate: true
xy: 112, 120
size: 49, 65
orig: 69, 81
offset: 0, 1
arm l
rotate: false
xy: 226, 154
size: 23, 49
orig: 23, 49
offset: 0, 0
index: -1
erdz
arm r
rotate: false
xy: 95, 31
size: 36, 78
orig: 36, 94
offset: 0, 1
xy: 226, 205
size: 28, 49
orig: 28, 50
offset: 0, 0
index: -1
jb
body
rotate: false
xy: 133, 13
size: 38, 38
orig: 39, 42
offset: 0, 3
xy: 161, 206
size: 63, 48
orig: 63, 49
offset: 0, 0
index: -1
st
ear l
rotate: false
xy: 2, 111
size: 108, 136
orig: 138, 139
offset: 26, 2
xy: 97, 201
size: 62, 53
orig: 62, 53
offset: 0, 0
index: -1
toua
ear r
rotate: true
xy: 161, 160
size: 44, 63
orig: 44, 63
offset: 0, 0
index: -1
eye l
rotate: false
xy: 2, 21
size: 91, 88
orig: 94, 89
offset: 3, 1
xy: 122, 145
size: 24, 20
orig: 26, 22
offset: 1, 1
index: -1
weib
eye r
rotate: false
xy: 220, 100
size: 27, 29
orig: 31, 33
offset: 2, 2
xy: 97, 144
size: 23, 21
orig: 25, 23
offset: 1, 1
index: -1
eye sadl
rotate: true
xy: 33, 126
size: 18, 23
orig: 18, 23
offset: 0, 0
index: -1
eye sadr
rotate: true
xy: 2, 125
size: 18, 23
orig: 18, 23
offset: 0, 0
index: -1
eye xiaol
rotate: true
xy: 148, 146
size: 19, 11
orig: 19, 11
offset: 0, 0
index: -1
eye xiaor
rotate: true
xy: 79, 125
size: 19, 11
orig: 19, 11
offset: 0, 0
index: -1
eyebrow l
rotate: false
xy: 45, 111
size: 8, 5
orig: 10, 8
offset: 1, 1
index: -1
ys
eyebrow r
rotate: false
xy: 133, 53
size: 36, 65
orig: 39, 69
offset: 1, 3
xy: 45, 118
size: 7, 6
orig: 10, 8
offset: 2, 1
index: -1
yziz
face
rotate: false
xy: 112, 171
size: 135, 76
orig: 176, 107
offset: 27, 17
xy: 2, 174
size: 93, 80
orig: 93, 81
offset: 0, 0
index: -1
zs
foot l
rotate: true
xy: 179, 131
size: 38, 65
orig: 41, 67
offset: 1, 1
xy: 138, 167
size: 32, 21
orig: 33, 22
offset: 1, 0
index: -1
leg l
rotate: true
xy: 97, 167
size: 32, 39
orig: 32, 39
offset: 0, 0
index: -1
mouth
rotate: false
xy: 58, 116
size: 17, 11
orig: 17, 19
offset: 0, 8
index: -1
mouth sad
rotate: false
xy: 27, 113
size: 16, 11
orig: 16, 12
offset: 0, 1
index: -1
zsy
mouth smile
rotate: true
xy: 179, 98
size: 31, 39
orig: 36, 42
offset: 3, 1
xy: 58, 129
size: 15, 19
orig: 15, 19
offset: 0, 0
index: -1
sai l
rotate: false
xy: 33, 146
size: 30, 26
orig: 34, 30
offset: 2, 2
index: -1
sai r
rotate: false
xy: 65, 146
size: 30, 26
orig: 34, 30
offset: 2, 2
index: -1
tail
rotate: false
xy: 2, 145
size: 29, 27
orig: 29, 27
offset: 0, 0
index: -1
scripts/rabbit/rabbit.json
View file @ c05d2240
This source diff could not be displayed because it is too large. You can view the blob instead.
scripts/rabbit/rabbit.png
View replaced file @ ee62695e View file @ c05d2240
scripts/rabbit/rabbit.png

69.7 KB | W: | H:

scripts/rabbit/rabbit.png

42 KB | W: | H:

scripts/rabbit/rabbit.png
scripts/rabbit/rabbit.png
scripts/rabbit/rabbit.png
scripts/rabbit/rabbit.png
  • 2-up
  • Swipe
  • Onion skin
src/Dream/development.ts
View file @ c05d2240
......@@ -108,6 +108,9 @@ export function createElement<K extends new(p?: any) => ChildType, T extends Chi
if (isFunction(props.onAddedToStage)) {
eleins.addEventListener(FYGE.Event.ADDED_TO_STAGE, props.onAddedToStage!)
}
if (isFunction(props.onRemoveFromStage)) {
eleins.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, props.onRemoveFromStage)
}
// 被移除的时候直接 去 清除 Tween
eleins.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, function(e: any) {
......
src/Dream/types.ts
View file @ c05d2240
......@@ -7,5 +7,7 @@ export type EventsMap = {
onClickCapture?: EventCallBack<FYGE.MouseEvent>
onEnterFrame?: EventCallBack<FYGE.Event>
onAddedToStage?: EventCallBack<FYGE.Event>
onAddedToStage?: EventCallBack<FYGE.Event>,
onRemoveFromStage?: EventCallBack<FYGE.Event>
}
\ No newline at end of file
src/ResJson.ts
View file @ c05d2240
......@@ -2,188 +2,24 @@ export const ResJson = {
"groups": [
{
"keys": "GSB.png,clockBack.png,platform.png,rabbit.png,scoreBoardBack.png,sp_boom.png,sp_milk.png",
"name": "GameScene",
"atlas": {
"GSB.png": {
"x": 2,
"y": 2,
"w": 750,
"h": 1624,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 1624,
"ro": false
},
"rabbit.png": {
"x": 754,
"y": 2,
"w": 110,
"h": 218,
"ox": 0,
"oy": 0,
"sw": 110,
"sh": 218,
"ro": false
},
"scoreBoardBack.png": {
"x": 754,
"y": 222,
"w": 193,
"h": 81,
"ox": 0,
"oy": 0,
"sw": 193,
"sh": 81,
"ro": true
},
"platform.png": {
"x": 754,
"y": 417,
"w": 142,
"h": 52,
"ox": 0,
"oy": 0,
"sw": 142,
"sh": 52,
"ro": true
},
"sp_boom.png": {
"x": 754,
"y": 561,
"w": 94,
"h": 99,
"ox": 0,
"oy": 0,
"sw": 94,
"sh": 99,
"ro": true
},
"sp_milk.png": {
"x": 754,
"y": 657,
"w": 93,
"h": 93,
"ox": 0,
"oy": 0,
"sw": 93,
"sh": 93,
"ro": false
},
"clockBack.png": {
"x": 754,
"y": 752,
"w": 80,
"h": 91,
"ox": 0,
"oy": 0,
"sw": 80,
"sh": 91,
"ro": true
}
}
"name": "GameScene"
},
{
"keys": "Guide1.png,Guide2.png,Guide3.png,Guide4.png",
"name": "NewGuyScene",
"atlas": {
"Guide1.png": {
"x": 2,
"y": 2,
"w": 750,
"h": 1624,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 1624,
"ro": false
},
"Guide2.png": {
"x": 754,
"y": 2,
"w": 750,
"h": 1624,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 1624,
"ro": false
},
"Guide3.png": {
"x": 1506,
"y": 2,
"w": 750,
"h": 1624,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 1624,
"ro": false
},
"Guide4.png": {
"x": 2,
"y": 1628,
"w": 750,
"h": 1624,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 1624,
"ro": true
}
}
"name": "NewGuyScene"
},
{
"keys": "closebtn.png,giftBoxIcon.png,waitingBg.png,waitingRot.png",
"name": "common",
"atlas": {
"waitingBg.png": {
"x": 2,
"y": 2,
"w": 160,
"h": 180,
"ox": 0,
"oy": 0,
"sw": 160,
"sh": 180,
"ro": false
},
"giftBoxIcon.png": {
"x": 164,
"y": 2,
"w": 127,
"h": 125,
"ox": 0,
"oy": 0,
"sw": 127,
"sh": 125,
"ro": true
},
"waitingRot.png": {
"x": 2,
"y": 184,
"w": 56,
"h": 56,
"ox": 0,
"oy": 0,
"sw": 56,
"sh": 56,
"ro": false
},
"closebtn.png": {
"x": 60,
"y": 184,
"w": 52,
"h": 52,
"ox": 0,
"oy": 0,
"sw": 52,
"sh": 52,
"ro": false
}
}
"name": "common"
},
{
"keys": "rabbit0.spi",
"name": "spine"
},
{
"keys": "SpBoom.svga,boomSvga.svga,spSvga.svga",
"name": "svga"
}
],
// eslint-disable-next-line
"path": "https://yun.duiba.com.cn/db_games/activity/template/1670923535/resource/"
"path": "./resource/"
}
\ No newline at end of file
src/components/DreamSvgaAni/DreamSvgaAni.tsx 0 → 100644
View file @ c05d2240
import { OriginalElementWidthEvents } from "../../Dream";
export const DreamSvgaAni: OriginalElementWidthEvents<{
svgaData: any,
loop?: number,
loopEnd?: () => void
}, FYGE.SvgaAni> = ({
svgaData,
loop = 0,
loopEnd = () => {}
}) => {
const svgaIns = new FYGE.SvgaAni(svgaData)
svgaIns.play(loop, loopEnd)
return svgaIns
}
\ No newline at end of file
src/scenes/GameScene/GameConfig.ts
View file @ c05d2240
......@@ -14,8 +14,8 @@ export const GameConfig = {
mapChangeAddSpeed: 10, // 切换地图就会 增加速度
renderMapScreenNum: 200, //当卷轴 移动到视窗上面多少 会去生成地图
rabbitConfig: {
offsetX: 10,
offsetY: -203,
offsetX: 70,
offsetY: 30,
},
DecisionLine: [
// 判定线 当前屏幕显示区域
......@@ -37,7 +37,7 @@ export const GameConfig = {
[4, 0, 0, 5, 0],
[0, 1, 1, 0, 1],
[4, 3, 0, 1, 0],
[0, 1, 1, 0, 0],
[0, 1, 1, 1, 0],
[5, 0, 0, 0, 1],
[1, 0, 1, 1, 1],
[0, 1, 0, 0, 5],
......
src/scenes/GameScene/GameScene.tsx
View file @ c05d2240
......@@ -10,7 +10,7 @@ import { PromiseAwait } from "../../tools/Tools";
import { GameConfig } from "./GameConfig";
import { G_Events } from "./GameEvents";
import { Platform } from "./Platform";
import { RabbitPlayer } from "./Player";
import { PlayerIns, RabbitActionMap, RabbitPlayer } from "./Player";
import { ScoreBoard } from "./ScoreBoard";
import { SpClock } from "./SpClock";
......@@ -31,6 +31,8 @@ function randomPro(n: number) {
@UsePreload({
preAction: async function() {
await RES.loadGroup('GameScene')
await RES.loadGroup('spine')
await RES.loadGroup('svga')
}
})
export class GameScene extends Dream.RenderContainer {
......@@ -46,7 +48,6 @@ export class GameScene extends Dream.RenderContainer {
set mapCount(v) {
this._mapCount = v;
this.renderMapOffsetY = layers.stageOffsetY - GameConfig.renderMapScreenNum + (v - 1) * mapHeight
console.log('renderMapOffsetY:', this.renderMapOffsetY)
}
isPause: boolean = true
......@@ -58,6 +59,9 @@ export class GameScene extends Dream.RenderContainer {
SpClockIns: SpClock // 道具倒计时
double: number = 1 // 是否双倍
rabbitIns: PlayerIns
cloneRabbitIns: PlayerIns
set dir(v: number) {
this.rabbitContainer.scaleX = v
this.rabbitCloneContainer.scaleX = v
......@@ -114,19 +118,28 @@ export class GameScene extends Dream.RenderContainer {
* 游戏结束
*/
onGameOver() {
this.onShowRabbitAni(RabbitActionMap.Fail)
FYGE.Tween.removeTweens(this.rabbitContainer)
this.isPause = true
GDispatcher.dispatchEvent(G_Events.GameOver, this.ScoreBoardIns.score)
}
/**
* 显示动画
*/
onShowRabbitAni(aniName: RabbitActionMap, endAni?: RabbitActionMap) {
this.rabbitIns.showAni(aniName, endAni)
this.cloneRabbitIns.showAni(aniName, endAni)
}
/**
* 开始渲染地图
* @param init 是否是初始化
*/
renderMap(init: boolean = false) {
console.info('=========render map ===========')
const mapConfig = GameConfig.mapList[Math.random() * GameConfig.mapList.length >> 0]
const {
rowNum,
......@@ -142,7 +155,10 @@ export class GameScene extends Dream.RenderContainer {
// 地图平台数组
const mapPlatform:Platform[][] = []
this.GameMapContainer.addChildAt(
<DreamContainer className="mapContainer" inlineProps={{
<DreamContainer className="mapContainer" onRemoveFromStage={() => {
console.log(this.rabbitBoxMap)
console.log('remove!!!!')
}} inlineProps={{
y: this.mapCount * rowNum * offsetYLen * -1
}}>
{
......@@ -198,9 +214,16 @@ export class GameScene extends Dream.RenderContainer {
</DreamContainer>
, 0)
this.mapCount += 1
// 增加速度
GameConfig.speed += GameConfig.mapChangeAddSpeed
this.rabbitBoxMap.unshift(...mapPlatform)
// 第三章图片的话，清楚掉第一张地图
if (this.mapCount >= 3) {
this.rabbitBoxMap.splice(60)
this.GameMapContainer.removeChildAt(2)
}
}
/**
......@@ -210,9 +233,12 @@ export class GameScene extends Dream.RenderContainer {
*/
renderRabbit(pos: Pos) {
if (this.rabbitContainer) return
// TODO Player 动作集
this.rabbitContainer = this.GameMapContainer.addChild(<RabbitPlayer />)
this.rabbitCloneContainer = this.GameMapContainer.addChild(<RabbitPlayer inlineProps={{
this.rabbitContainer = this.GameMapContainer.addChild(<RabbitPlayer getPlayer={p => {
this.rabbitIns = p
}} />)
this.rabbitCloneContainer = this.GameMapContainer.addChild(<RabbitPlayer getPlayer={p => {
this.cloneRabbitIns = p
}} inlineProps={{
visible: false,
className: 'clone'
}} />)
......@@ -221,7 +247,6 @@ export class GameScene extends Dream.RenderContainer {
pos.y * offsetYLen
)
this.rabbitPos = pos
console.log(this.rabbitContainer)
}
lastTime: number = 0
......@@ -279,15 +304,25 @@ export class GameScene extends Dream.RenderContainer {
let landPlatform: Platform
while(!(landPlatform = rabbitBoxMap[shouldY][willX])) {
shouldY += 1
if (shouldY >= rabbitBoxMap.length - 1) {
if (shouldY >= rabbitBoxMap.length) {
break
}
}
// TODO 如果找不到 下去的平台 直接不让跳吧
if (!landPlatform) {
resolve()
return
}
// 这里之前提前改，否则会有时序问题
this.rabbitPos = {
x: willX,
y: shouldY
}
const afterCb = this.onPlatformLand(landPlatform)
FYGE.Tween.removeTweens(rabbitContainer)
if (rax == 4) {
rabbitCloneContainer.visible = true
......@@ -297,7 +332,7 @@ export class GameScene extends Dream.RenderContainer {
rabbitCloneContainer.position.set(rabbitContainer.x + 750, rabbitContainer.y)
}
const sp = shouldY - ray
const downTime = 200 * (sp > 0 ? sp : 1)
const downTime = 300 // 200 * (sp > 0 ? sp : 1)
FYGE.Tween.get(rabbitContainer, {
onChange: () => {
// rabbitContainer.x = (rabbitContainer.x + 750) % 750
......@@ -306,7 +341,7 @@ export class GameScene extends Dream.RenderContainer {
})
.to({
x: _willX * offsetXLen
}, 400 + downTime)
}, 600 + downTime)
FYGE.Tween.get(rabbitContainer, {
onChange: () => {
......@@ -315,7 +350,7 @@ export class GameScene extends Dream.RenderContainer {
})
.to({
y: Math.min(ry + sp * offsetYLen, ry) - 100
}, 400, FYGE.Ease.quadOut)
}, 600, FYGE.Ease.quadOut)
.to({
y: ry + sp * offsetYLen
}, downTime, FYGE.Ease.quadIn)
......@@ -326,7 +361,8 @@ export class GameScene extends Dream.RenderContainer {
this.rabbitContainer = rabbitCloneContainer
this.rabbitCloneContainer = rabbitContainer
}
this.onPlatformLand(landPlatform)
afterCb()
resolve()
})
......@@ -338,17 +374,34 @@ export class GameScene extends Dream.RenderContainer {
* @param platform
*/
onPlatformLand(platform: Platform) {
platform.onLand((type: number, s: number) => {
let noop = () => {}
platform.onLand((type: number, s: number, cb: Function) => {
// pre 去做动作吧
if (type == 3) {
return this.onGameOver()
this.onShowRabbitAni(RabbitActionMap.Jump, RabbitActionMap.Fail)
} else if (type == 2) {
this.double = 2
this.SpClockIns.onShowCountDown(() => {
this.double = 1
})
this.onShowRabbitAni(RabbitActionMap.Jump, RabbitActionMap.Smile)
} else {
this.onShowRabbitAni(RabbitActionMap.Jump, RabbitActionMap.Normal)
}
// 落地的回调
noop = () => {
cb()
if (type == 3) {
return this.onGameOver()
} else if (type == 2) {
this.double = 2
this.SpClockIns.onShowCountDown(() => {
this.double = 1
})
}
this.onAddScore(s)
}
this.onAddScore(s)
})
return noop
}
/**
......
src/scenes/GameScene/Platform.tsx
View file @ c05d2240
import { DreamContainer } from "../../components/DreamContainer/DreamContainer";
import { DreamSprite } from "../../components/DreamSprite/DreamSprite";
import { DreamSvgaAni } from "../../components/DreamSvgaAni/DreamSvgaAni";
import { DreamTextField } from "../../components/DreamTextField/DreamTextField";
import Dream from "../../Dream";
import { fadeOutUpFactory } from "../../modules/animations";
......@@ -13,13 +14,36 @@ export class Platform extends Dream.RenderContainer<{
}> {
private isLanded: boolean = false // 是否被踩过
private spCont: FYGE.Container
onLand(cb?: (type: number, s: number) => void) {
if (this.isLanded) return
PlatformContainer: FYGE.Container
onLand(cb?: (type: number, s: number, afterCb: Function) => void) {
const ctype = this.isLanded ? 1 : this.props.type
cb && cb(ctype, this.isLanded ? 0 : GameConfig.landPlatformScore, () => {
if (ctype !== 1 && this.spCont) {
// fadeOutUpFactory(500)(this.spCont)
this.spCont.visible = false
if (ctype == 3) {
const atom = new FYGE.SvgaAni(RES.getRes('boomSvga.svga'))
atom.position.set(-50, -162)
atom.play(1, () => {
atom.parent.removeChild(atom)
})
this.PlatformContainer.addChild(
atom
)
} else if (ctype == 2) {
const atom = new FYGE.SvgaAni(RES.getRes('spSvga.svga'))
atom.position.set(-100, -320)
atom.play(1, () => {
atom.parent.removeChild(atom)
})
this.PlatformContainer.addChild(
atom
)
}
}
})
this.isLanded = true
if (this.spCont) {
fadeOutUpFactory(500)(this.spCont)
}
cb && cb(this.props.type, GameConfig.landPlatformScore)
}
/**
......@@ -33,17 +57,21 @@ export class Platform extends Dream.RenderContainer<{
y: -100
}} src={RES.getRes('sp_milk.png')} />
} else if (this.props.type == 3) {
return this.spCont = <DreamSprite inlineProps={{
x: 20,
y: -90
}} src={RES.getRes('sp_boom.png')} />
return this.spCont = <DreamSvgaAni
inlineProps={{
x: 20,
y: -85
}}
svgaData={RES.getRes('SpBoom.svga')} />
}
}
render() {
const backRes = RES.getRes('platform.png')
return (
<DreamContainer inlineProps={{
<DreamContainer ref={el => {
this.PlatformContainer = el
}} inlineProps={{
x: this.props.x || 0
}}>
<DreamSprite src={backRes} inlineProps={{
......
src/scenes/GameScene/Player.tsx
View file @ c05d2240
import { DreamContainer } from "../../components/DreamContainer/DreamContainer";
import { DreamSpine, setSpineAni } from "../../components/DreamSpine/DreamSpine";
import { DreamSprite } from "../../components/DreamSprite/DreamSprite";
import Dream from "../../Dream";
import { RES } from "../../modules/RES";
import { Tools } from "../../tools/Tools";
import { GameConfig } from "./GameConfig";
export enum RabbitActionMap {
Normal = 'daijizc',
Smile = 'daijizcxiao',
Fail = 'daijiku',
Jump = 'jump'
}
export type PlayerIns = {
showAni: (a: RabbitActionMap, b?: RabbitActionMap) => Promise<any>
}
export class RabbitPlayer extends Dream.RenderContainer<{
inlineProps?: Record<string, any>
inlineProps?: Record<string, any>,
getPlayer?: (p: PlayerIns) => void
}> {
spinePlayer: FYGE.Spine
currAniName: RabbitActionMap
didRendered(): void {
this.props.getPlayer && this.props.getPlayer({
showAni: (aniName: RabbitActionMap, endAni?: RabbitActionMap) => {
this.currAniName = aniName
return new Promise<void>(resolve => {
setSpineAni(this.spinePlayer, aniName, endAni ? 1 : 0, () => {
endAni && setSpineAni(this.spinePlayer, endAni)
resolve()
})
})
}
})
}
render() {
const spineData = RES.getRes('rabbit0.spi')
return (
<DreamContainer inlineProps={{
...this.props.inlineProps,
......@@ -17,7 +50,13 @@ export class RabbitPlayer extends Dream.RenderContainer<{
x: GameConfig.rabbitConfig.offsetX,
y: GameConfig.rabbitConfig.offsetY
}}>
<DreamSprite src={RES.getRes('rabbit.png')} />
{/* <DreamSprite src={RES.getRes('rabbit.png')} /> */}
<DreamSpine ref={el => {
this.spinePlayer = el
}} spineData={spineData}
aniName={"daijizc"}
skinName={Tools.PageData.skinName}
/>
</DreamContainer>
</DreamContainer>
)
......
src/tools/Tools.ts
View file @ c05d2240
export class Tools {
static PageData: {
isFirstGame: boolean
skinName: string
} = {
isFirstGame: false
isFirstGame: false,
skinName: ''
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment