Skip to content

Commit

Permalink
完善pixi演出的调用和卸载
Browse files Browse the repository at this point in the history
  • Loading branch information
MakinoharaShoko committed Apr 13, 2022
1 parent 59960ea commit ee7ef35
Show file tree
Hide file tree
Showing 20 changed files with 380 additions and 28 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"cloudlogjs": "^1.0.9",
"localforage": "^1.10.0",
"lodash": "^4.17.21",
"pixi.js": "^6.2.2",
"pixi.js": "^6.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"reto": "^0.9.3",
Expand Down
7 changes: 6 additions & 1 deletion public/game/scene/start.txt
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
bgm:夏影.mp3;
changeBg:0000.png -next;
WebGAL:这是一条测试语句。 -V1.ogg;
pixiPerform:snow -next;
miniAvatar:minipic_test.png -next;
intro:慢慢地|慢慢地|如雪花一般|凋零 -next;
慢慢地,慢慢地,如雪花一般,凋零。
callScene:test2.txt;
back;
pixiInit: -next;
停止下雪。
WebGAL4x:这是测试场景的第二条语句,这是测试场景的第二条语句,这是测试场景的第二条语句,这是测试场景的第二条语句;
changeBg:0000e.png -next;
WebGAL4x_Build_4.0.2:这是测试场景的第三条语句;
changeFigure:testFigure04.png -left;
changeFigure: -left -clear -next;
changeFigure:testFigure04.png -right;
changeFigure:testFigure04.png -right;
测试结束;
3 changes: 2 additions & 1 deletion src/Components/Stage/FullScreenPerform/FullScreenPerform.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ export const FullScreenPerform = () => {
return <div className={styles.FullScreenPerform_main}>
<div id="videoContainer"/>
<div className={styles.introContainer} id="introContainer"/>
<div id="pixiContianer"/>
</div>;
};
};
3 changes: 3 additions & 0 deletions src/Components/Stage/TextBox/TextBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ export const TextBox = () => {
style={{animationDelay: String(index * textDelay) + 'ms'}}>{e}</span>;
});
return <div id="textBoxMain" className={styles.TextBox_main}>
<div id='miniAvatar' className={styles.miniAvatarContainer}>
{StageStore.stageState.miniAvatar !== '' && <img className={styles.miniAvatarImg} alt="miniAvatar" src={StageStore.stageState.miniAvatar}/>}
</div>
{StageStore.stageState.showName !== '' &&
<div className={styles.TextBox_showName} style={{fontSize: '200%'}}>{StageStore.stageState.showName}</div>}
<div style={{fontSize: size}}>
Expand Down
19 changes: 17 additions & 2 deletions src/Components/Stage/TextBox/textbox.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
position: absolute;
z-index: 6;
width: 100%;
height: 40%;
height: 38.5%;
background: linear-gradient(transparent,
rgba(0, 0, 0, .25) 25%,
rgba(0, 0, 0, .35) 75%,
Expand All @@ -21,7 +21,7 @@
transparent);
bottom: 0;
color: white;
padding: 1em 13.5em 2em 13.5em;
padding: 1em 18em 2em 18em;
box-sizing: border-box;
overflow: hidden;
display: flex;
Expand Down Expand Up @@ -70,3 +70,18 @@
opacity: 1;
}
}

.miniAvatarContainer{
position: absolute;
height: 80%;
width: 17%;
bottom: 0;
left: 0.5em;
}

.miniAvatarImg{
max-height: 100%;
max-width: 100%;
position: absolute;
bottom: 0;
}
39 changes: 25 additions & 14 deletions src/Core/controller/gamePlay/runScript.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import { commandType, ISentence } from '../../interface/coreInterface/sceneInterface';
import { say } from './scripts/say';
import { initPerform, IPerform } from '../../interface/coreInterface/performInterface';
import { unmountPerform } from '../perform/unmountPerform';
import { getRef } from '../../store/storeRef';
import { runtime_gamePlay } from '../../runtime/gamePlay';
import { changeBg } from './scripts/changeBg';
import { changeFigure } from './scripts/changeFigure';
import { bgm } from './scripts/bgm';
import { callSceneScript } from './scripts/callSceneScript';
import { changeSceneScript } from './scripts/changeSceneScript';
import { intro } from './scripts/intro';
import {commandType, ISentence} from '../../interface/coreInterface/sceneInterface';
import {say} from './scripts/say';
import {initPerform, IPerform} from '../../interface/coreInterface/performInterface';
import {unmountPerform} from '../perform/unmountPerform';
import {getRef} from '../../store/storeRef';
import {runtime_gamePlay} from '../../runtime/gamePlay';
import {changeBg} from './scripts/changeBg';
import {changeFigure} from './scripts/changeFigure';
import {bgm} from './scripts/bgm';
import {callSceneScript} from './scripts/callSceneScript';
import {changeSceneScript} from './scripts/changeSceneScript';
import {intro} from './scripts/intro';
import {pixi} from "../../../Core/controller/gamePlay/scripts/pixi";
import {miniAvatar} from "../../../Core/controller/gamePlay/scripts/miniAvatar";
import {pixiInit} from "../../../Core/controller/gamePlay/scripts/pixiInit";
import {logger} from "../../../Core/util/logger";

/**
* 规范函数的类型
Expand All @@ -22,6 +26,7 @@ type scriptFunction = (sentence: ISentence) => IPerform
* @param script 调用的语句
*/
export const runScript = (script: ISentence) => {
logger.debug('执行',script);
let perform: IPerform = initPerform;
let funcToRun: scriptFunction = say; // 默认是say

Expand All @@ -34,6 +39,9 @@ export const runScript = (script: ISentence) => {
[commandType.callScene, callSceneScript],
[commandType.changeScene, changeSceneScript],
[commandType.intro, intro],
[commandType.pixi,pixi],
[commandType.miniAvatar,miniAvatar],
[commandType.pixiInit,pixiInit]
]);

// 根据脚本类型切换函数
Expand All @@ -46,6 +54,7 @@ export const runScript = (script: ISentence) => {

// 语句不执行演出
if (perform.performName === 'none') {
logger.info('语句不执行演出');
return;
}

Expand All @@ -55,10 +64,12 @@ export const runScript = (script: ISentence) => {

// 时间到后自动清理演出
perform.stopTimeout = setTimeout(() => {
perform.stopFunction();
if (!perform.isHoldOn)
// perform.stopFunction();
perform.isOver = true;
if (!perform.isHoldOn){
// 如果不是保持演出,清除
unmountPerform(perform.performName);
}
}, perform.duration);

runtime_gamePlay.performList.push(perform);
Expand Down
22 changes: 22 additions & 0 deletions src/Core/controller/gamePlay/scripts/miniAvatar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {ISentence} from '../../../interface/coreInterface/sceneInterface';
import {IPerform} from '../../../interface/coreInterface/performInterface';
import {getRef} from "../../../../Core/store/storeRef";

/**
* 语句执行的模板代码
* @param sentence
*/
export const miniAvatar = (sentence: ISentence): IPerform => {
getRef('stageRef').setStage('miniAvatar', sentence.content);
return {
performName: 'none',
duration: 0,
isOver: false,
isHoldOn: true,
stopFunction: () => {
},
blockingNext: () => false,
blockingAuto: () => true,
stopTimeout: undefined, // 暂时不用,后面会交给自动清除
};
};
52 changes: 52 additions & 0 deletions src/Core/controller/gamePlay/scripts/pixi.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {ISentence} from '../../../interface/coreInterface/sceneInterface';
import {IPerform} from '../../../interface/coreInterface/performInterface';
import {runtime_gamePlay} from "../../../../Core/runtime/gamePlay";
import pixiRain from "../../../../Core/controller/perform/pixi/pixiScripts/rain";
import {pixiSnow} from "../../../../Core/controller/perform/pixi/pixiScripts/snow";
import {pixiController} from "../../../../Core/controller/perform/pixi/pixiController";
import {logger} from "../../../../Core/util/logger";

/**
* 语句执行的模板代码
* @param sentence
*/
export const pixi = (sentence: ISentence): IPerform => {
const pixiPerformName = 'PixiPerform' + sentence.content;
runtime_gamePlay.performList.forEach(e => {
if (e.performName === pixiPerformName) {
return {
performName: 'none',
duration: 0,
isOver: false,
isHoldOn: true,
stopFunction: () => {
},
blockingNext: () => false,
blockingAuto: () => false,
stopTimeout: undefined, // 暂时不用,后面会交给自动清除
};
}
});
let container: any;
switch (sentence.content) {
case 'rain':
container = pixiRain(6, 10);
break;
case 'snow':
container = pixiSnow(3);
break;
}
return {
performName: pixiPerformName,
duration: 0,
isOver: false,
isHoldOn: true,
stopFunction: () => {
logger.warn('卸载pixi演出');
container.destroy({texture: true, baseTexture: true});
},
blockingNext: () => false,
blockingAuto: () => false,
stopTimeout: undefined, // 暂时不用,后面会交给自动清除
};
};
52 changes: 52 additions & 0 deletions src/Core/controller/gamePlay/scripts/pixiInit.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {commandType, ISentence} from '../../../interface/coreInterface/sceneInterface';
import {IPerform, IRunPerform} from '../../../interface/coreInterface/performInterface';
import {runtime_gamePlay} from "../../../../Core/runtime/gamePlay";
import {logger} from "../../../../Core/util/logger";
import {getRef} from "../../../../Core/store/storeRef";

/**
* 语句执行的模板代码
* @param sentence
*/
export const pixiInit = (sentence: ISentence): IPerform => {
runtime_gamePlay.performList.forEach((e) => {
if (e.performName.match(/PixiPerform/)) {
logger.warn('pixi 被脚本重新初始化', e.performName);
/**
* 卸载演出
*/
for (let i = 0; i < runtime_gamePlay.performList.length; i++) {
const e2 = runtime_gamePlay.performList[i];
if (e2.performName === e.performName) {
e2.stopFunction();
clearTimeout(e2.stopTimeout);
runtime_gamePlay.performList.splice(i, 1);
i--;
}
}
/**
* 从状态表里清除演出
*/
const stageStore: any = getRef('stageRef');
for (let i = 0; i < stageStore.stageState.PerformList.length; i++) {
const e2: IRunPerform = stageStore.stageState.PerformList[i];
if (e2.script.command === commandType.pixi) {
stageStore.stageState.PerformList.splice(i, 1);
i--;
}
}
}
}
);
return {
performName: 'none',
duration: 0,
isOver: false,
isHoldOn: false,
stopFunction: () => {
},
blockingNext: () => false,
blockingAuto: () => true,
stopTimeout: undefined, // 暂时不用,后面会交给自动清除
};
};
34 changes: 33 additions & 1 deletion src/Core/controller/perform/pixi/pixiController.ts
Original file line number Diff line number Diff line change
@@ -1 +1,33 @@
export const pixiController = () => {};
import * as PIXI from "pixi.js";
import {runtime_gamePlay} from "../../../../Core/runtime/gamePlay";

export const pixiController = (active: boolean) => {
if (active) {
let app = new PIXI.Application({
backgroundAlpha: 0
});
// 清空原节点
const pixiContainer = document.getElementById('pixiContianer');
if (pixiContainer) {
pixiContainer.innerHTML = '';
pixiContainer.appendChild(app.view);
}

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
// @ts-ignore
app.renderer.autoResize = true;
const appRoot = document.getElementById('root');
if (appRoot) {
app.renderer.resize(appRoot.clientWidth, appRoot.clientHeight);
}
app.renderer.view.style.zIndex = '5';
runtime_gamePlay.currentPixi = app;
} else {
// 清空原节点
const pixiContainer = document.getElementById('pixiContianer');
if (pixiContainer) {
pixiContainer.innerHTML = '';
}
}
};
75 changes: 75 additions & 0 deletions src/Core/controller/perform/pixi/pixiScripts/rain.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import * as PIXI from "pixi.js";
import {runtime_gamePlay} from "../../../../../Core/runtime/gamePlay";

export const pixiRain = (rainSpeed: number, number: number) => {
// 动画参数
// 设置缩放的系数
const scalePreset = 0.3;


const app = runtime_gamePlay.currentPixi;
const container = new PIXI.Container();
app.stage.addChild(container);
// 创建纹理
const texture = PIXI.Texture.from('./game/tex/raindrop.png');
// 将容器移到中心
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;
// 调整缩放
container.scale.x = 1;
container.scale.y = 1;
// container.rotation = -0.2;
const bunnyList: any = [];
// 监听动画更新
app.ticker.add((delta: any) => {
// 获取长宽,用于控制雪花出现位置
const stageWidth = 1600;
const stageHeight = 900;
for (let i = 0; i < number; i++) {
// 创建对象
const bunny = new PIXI.Sprite(texture);
// 随机雨点大小
let scaleRand = Math.random();
if (scaleRand <= 0.5) {
scaleRand = 0.5;
}
bunny.scale.x = scalePreset * scaleRand;
bunny.scale.y = scalePreset * scaleRand;
// 设置锚点
bunny.anchor.set(0.5);
// 随机雪花位置
bunny.x = Math.random() * stageWidth - 0.5 * stageWidth;
bunny.y = 0 - 0.5 * stageHeight;
// @ts-ignore
bunny['dropSpeed'] = Math.random() * 2;
// @ts-ignore
bunny['acc'] = Math.random();
bunny['alpha'] = Math.random();
if (bunny['alpha'] >= 0.5) {
bunny["alpha"] = 0.5;
}
if (bunny['alpha'] <= 0.2) {
bunny['alpha'] = 0.2;
}
container.addChild(bunny);
// 控制每片雨点
bunnyList.push(bunny);
}
// 雨点落下
for (const e of bunnyList) {
e['dropSpeed'] = e['acc'] * 0.01 + e['dropSpeed'];
e.y += delta * rainSpeed * e['dropSpeed'] * 1.1 + 3;
}
// 控制同屏雨点数
if (bunnyList.length >= 2500) {
bunnyList.unshift();
container.removeChild(container.children[0]);
}
});
return container;
};


export default pixiRain;
Loading

0 comments on commit ee7ef35

Please sign in to comment.