Sure!
This is my scene class.
// You can write more code here
/* START OF COMPILED CODE */
import Phaser, { Time } from "phaser";
import UIPlugin from "phaser3-rex-plugins/templates/ui/ui-plugin.js";
import {
CustomShapes,
Dialog,
Space,
} from "phaser3-rex-plugins/templates/ui/ui-components";
const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;
var content = `Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.`;
const GetValue = Phaser.Utils.Objects.GetValue;
var createTextBox = function (scene: any, x: any, y: any, config: any) {
var wrapWidth = GetValue(config, "wrapWidth", 0);
var fixedWidth = GetValue(config, "fixedWidth", 0);
var fixedHeight = GetValue(config, "fixedHeight", 0);
var textBox = scene.rexUI.add
.textBox({
x: x,
y: y,
rtl: true,
background: scene.rexUI.add
.roundRectangle(0, 0, 2, 2, 20, COLOR_PRIMARY)
.setStrokeStyle(2, COLOR_LIGHT),
icon: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 20, COLOR_DARK),
// text: getBuiltInText(scene, wrapWidth, fixedWidth, fixedHeight),
text: getBBcodeText(scene, wrapWidth, fixedWidth, fixedHeight),
action: scene.add
.image(0, 0, "nextPage")
.setTint(COLOR_LIGHT)
.setVisible(false),
space: {
left: 20,
right: 20,
top: 20,
bottom: 20,
icon: 10,
text: 10,
},
})
.setOrigin(0)
.layout();
textBox
.setInteractive()
.on(
"pointerdown",
function () {
var icon = textBox.getElement("action").setVisible(false);
textBox.resetChildVisibleState(icon);
if (textBox.isTyping) {
//icon.stop(true);
textBox.stop(true);
}
// else if (textBox.isLastPage){
// textBox.destroy();
// }
else {
textBox.typeNextPage();
}
},
textBox
)
.on(
"pageend",
function () {
if (textBox.isLastPage) {
//textBox.setVisible(false);
textBox.destroy();
return;
}
var icon = textBox.getElement("action").setVisible(true);
textBox.resetChildVisibleState(icon);
icon.y -= 30;
var tween = scene.tweens.add({
targets: icon,
y: "+=30", // '+=100'
ease: "Bounce", // 'Cubic', 'Elastic', 'Bounce', 'Back'
duration: 500,
repeat: 0, // -1: infinity
yoyo: false,
});
},
textBox
);
//.on('type', function () {
//})
return textBox;
};
var getBBcodeText = function (
scene: any,
wrapWidth: any,
fixedWidth: any,
fixedHeight: any
) {
return scene.rexUI.add.BBCodeText(0, 0, "", {
fixedWidth: fixedWidth,
fixedHeight: fixedHeight,
rtl: true,
fontFamily: "Almarai",
fontSize: "28px",
wrap: {
mode: "word",
width: wrapWidth,
},
maxLines: 3,
});
};
export default class Lab extends Phaser.Scene {
rexUI!: UIPlugin;
constructor() {
super("Lab");
/* START-USER-CTR-CODE */
// Write your code here.
/* END-USER-CTR-CODE */
}
editorCreate(): void {
// bG_challenge1
this.add.image(960, 540, "BG_challenge1");
this.events.emit("scene-awake");
}
/* START-USER-CODE */
// Write your code here
preload() {
//this.load.html("nameform", "assets/loginForm.html");
}
create() {
this.editorCreate();
var content = `يجب أن أنتهي من جمع هذا الروبوت بأسرع وقت! هناك اثنا عشرة قطعة متناثرة في هذا المختبر، و يجب عليّ إيجادها بأسرع وقت.`;
this.rexUI.add
.sizer({
x: 920,
y: 800,
width: 1280,
height: 720,
orientation: "x",
rtl: true,
space: { left: 10, right: 10, top: 10, bottom: 25, item: 10 },
})
// .addBackground(
// new SpeechBubble(this, COLOR_PRIMARY, 0xffffff)
// //this.add.image(960, 540, "Image from iOS")
// )
.add(
this.add.image(960, 540, "scientist"),
{
proportion: 1,
align: "right-bottom",
}
// this.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_LIGHT),
// {
// proportion: 0,
// align: 'bottom'
// }
)
.add( createTextBox(this, 100, 400, {
wrapWidth: 500,
fixedWidth: 500,
fixedHeight: 65,
}).start(content, 50))
// .add(
// this.rexUI.wrapExpandText(
// this.add.text(0, 0, content, {
// fontFamily: "Cairo",
// fontSize: "32px",
// color: "#000000",
// rtl: true,
// testString: "يجب أن أنتهي من جمع هذا الروبوت بأسرع وقت!",
// })
// ),
// {
// proportion: 1,
// align: "center",
// //expand: true
// }
// )
// .add(
// this.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_LIGHT),
// {
// proportion: 0,
// align: 'bottom'
// }
// )
.layout();
//.drawBounds(this.add.graphics(), 0xff0000);
}
/* END-USER-CODE */
}
/* END OF COMPILED CODE */
// You can write more code here
This is my game config
import Phaser from "phaser";
import preloadPackUrl from "../static/assets/preload-asset-pack.json";
import UIPlugin from "phaser3-rex-plugins/templates/ui/ui-plugin.js";
import Level from "./scenes/Level";
import Preload from "./scenes/Preload";
import Lab from "./scenes/Lab";
class Boot extends Phaser.Scene {
constructor() {
super("Boot");
}
preload() {
this.load.pack("pack", preloadPackUrl);
}
create() {
this.scene.start("Preload");
}
}
const game = new Phaser.Game({
width: 1920,
height: 1080,
backgroundColor: "#2f2f2f",
parent: "game",
scale: {
mode: Phaser.Scale.ScaleModes.FIT,
autoCenter: Phaser.Scale.Center.CENTER_BOTH,
},
dom: {
createContainer: true,
},
scene: [Boot, Preload, Level, Lab],
plugins: {
scene: [
{
key: "rexUI",
plugin: UIPlugin,
mapping: "rexUI",
},
],
},
});
game.scene.start("Boot");
