rex
rexrainbow / phaser3-rex-notes Goto Github PK
View Code? Open in Web Editor NEWNotes of phaser3 engine
License: MIT License
Notes of phaser3 engine
License: MIT License
My game have plugin rexUI from rexUI to create a simple scroll view (use GridTable) in a scene called Menu. Everything works fine, until I click an item view, this call a callback to start a scene (called Game). In console, it showed error and the game got frozen.
Actually, the game got frozen in version 3.14. When I update to version (just downloaded in webs) 3.15.1, it no longer frozen, the Game scene is loaded but the error still thrown.
Import plugin in scene (Menu)
preload() { this.load.scenePlugin({ key: 'rexuiplugin', url: 'assets/libs/rexuiplugin.min.js', sceneKey: 'rexUI' }); }
Event:
// event table.on('cell.click', function (cellContainer, cellIndex) { console.log('Game scene with index ' + cellIndex); this.scene.start('Game'); }, this);
It's linked to issue I post in Phaser Issue
If 2 scenes have ScenePlugin (created in preload function) to create some UI elements, then scene A call scene B, it's getting warning Scene Plugin key in use: rexuiplugin, and thrown an error:
Uncaught TypeError: Cannot read property 'add' of undefined.
This 'add' was used as: 'this.rexUI.add.' in scene B.
If I use another key, the UI won't work and stop.
can you tell me how to, resize each column each column.. please
https://codepen.io/dranitski/pen/gOOKQvg?editors=0010
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/gridtable/#get-cell gridTable.getCell is not a function, but described in docs.
gridTable.getCellContainer is also not working.
Can you please advice how to get cell and cell container?
Hi!
Here is the code to reproduce the issue
import UIPlugin from '../../templates/ui/ui-plugin.js';
// LAYOUT
const SCALE = window.devicePixelRatio
const SCREEN_WIDTH = window.innerWidth*SCALE
const SCREEN_HEIGHT = window.innerHeight*SCALE
const MENU = {
x: SCREEN_WIDTH/2,
y: SCREEN_HEIGHT/2,
w: 775*SCALE,
h: 531*SCALE,
border: 115,
safe: {left: 45, top: 75, right: 55, bottom: 80}, // left, top, right, bottom
border_scale: 1,
}
// SCENE
class Demo extends Phaser.Scene {
constructor() {
super({
key: 'examples'
})
}
preload() {
this.load.image('menu', 'https://i.ibb.co/6gmTJWN/menu.png'); // 775x531
}
create() {
this.addNinePatchFixed(MENU.x, MENU.y, MENU.w, MENU.h, MENU.border)
this.rexUI.add.roundRectangle(
MENU.x-MENU.w/2+MENU.safe.left*MENU.border_scale, // x
MENU.y-MENU.h/2+MENU.safe.top*MENU.border_scale, // y
MENU.w-MENU.safe.right*MENU.border_scale*2, // w
MENU.h-MENU.safe.bottom*MENU.border_scale*2, // h
0,
0x00ff00,
0.4)
.setDepth(10).setOrigin(0, 0);
}
addNinePatchFixed(x, y, w, h, value) {
return this.rexUI.add.ninePatch({
x: x, y: y,
width: w, height: h,
key: 'menu',
columns: [value, undefined, value],
rows: [value, undefined, value],
stretchMode: 0
}).setOrigin(0.5, 0.5)
}
}
// GAME
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
plugins: {
scene: [{
key: 'rexUI',
plugin: UIPlugin,
mapping: 'rexUI'
}]
},
scene: Demo,
};
var game = new Phaser.Game(config);
You have to run this code locally, then go to browser and reload page with different DPR settings (1,2,3):
So here is the issue - since I am making responsive games that have to not look blurry on high-dpr (retina) displays my Phaser game width
, height
should be equal to window.innerWidth*window.devicePixelRation
x window.innerHeight*window.devicePixelRation
- that means game resizes to fully fit the device screen. Then because of game.config.scale.mode = Phaser.Scale.FIT the canvas will be resized to window.innerWidth
x window.innerHeight
.
Since the ninepatch border is never scaled and being set as absolute value, its size will be different on screens with different DPR, that's what screenshots prove. Seems like I can not affect this border scale, but I definetely need to do it. For example on DPR=2 screen I want my border to be x2
-scaled to visually appear same size as on DPR=1 screen. Same for DPR=3 screen - my border should be scaled x3
there is a way I tried to solve that issue by scaling the ninepatch with setScale(SCALE)
after initialization:
import UIPlugin from '../../templates/ui/ui-plugin.js';
// LAYOUT
const SCALE = window.devicePixelRatio
const SCREEN_WIDTH = window.innerWidth*SCALE
const SCREEN_HEIGHT = window.innerHeight*SCALE
const MENU = {
x: SCREEN_WIDTH/2,
y: SCREEN_HEIGHT/2,
w: 775,
h: 531,
border: 115,
safe: {left: 45, top: 75, right: 55, bottom: 80}, // left, top, right, bottom
}
// SCENE
class Demo extends Phaser.Scene {
constructor() {
super({
key: 'examples'
})
}
preload() {
this.load.image('menu', 'https://i.ibb.co/6gmTJWN/menu.png'); // 775x531
}
create() {
this.addNinePatchFixed(MENU.x, MENU.y, MENU.w, MENU.h, MENU.border).setScale(SCALE);
this.rexUI.add.roundRectangle(
MENU.x-15, // x
MENU.y-5, // y
MENU.w-MENU.safe.right-MENU.safe.left, // w
MENU.h-MENU.safe.bottom-MENU.safe.top, // h
0,
0x00ff00,
0.4)
.setDepth(10).setScale(SCALE);
}
addNinePatchFixed(x, y, w, h, value) {
return this.rexUI.add.ninePatch({
x: x, y: y,
width: w, height: h,
key: 'menu',
columns: [value, undefined, value],
rows: [value, undefined, value],
stretchMode: 0
}).setOrigin(0.5, 0.5)
}
}
// GAME
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
plugins: {
scene: [{
key: 'rexUI',
plugin: UIPlugin,
mapping: 'rexUI'
}]
},
scene: Demo,
};
var game = new Phaser.Game(config);
There is a mess in my head after a long workday so I will try to look into that once again tomorrow. Scenario 2 seems working, but I don't like something about it intuitively but cant figure out what's wrong at the moment.
Any help or ideas in solving that task will be highly appreciated. Thanks in advance!
The links for the source code in docs is not working.
for example https://codepen.io/rexrainbow/pen/YMyBom
https://codepen.io/dranitski/pen/wvvZgaq here I created an example
I want your test texture middle part (the triangle) to be stretched according to docs:
columns : Configuration of columns.
A number array, like [20, 20, 20], or [20, undefined, 20] : Width of each column. undefined value will be replaced by remainder value from texture width.
Width of odd columns (column 0, column 2, ...) will be origin width.
Width of even columns (column 1, column 3, ...) will be **stretched**.
But whatever stretchMode settings I pass it seems only to copy the middle part instead of stretching it.
Will be glad for any advice!
Good day!
With rollup i get warn:
Circular dependency: node_modules\phaser3-rex-plugins\templates\ui\menu\Menu.js -> node_modules\phaser3-rex-plugins\templates\ui\menu\ExpandSubMenu.js -> node_modules\phaser3-rex-plugins\templates\ui\menu\Menu.js
Is there a way I can destroy a particular area inside a bbcode text object?
I made a small demo: https://codepen.io/alexandernst/pen/LYPobqO?editors=0010
After running
scene.add.rexBBCodeText(0, 0, 'test text');
get this error
Uncaught TypeError: Cannot read property 'matrix' of undefined
at TextureTintPipeline.batchTexture
Hello. When compressing the bundle compiled by rollup, terser throws an error:
Components$1.Alpha,
Components$1.Flip, );
^ Unexpected token: punc ())
The problem is solved if in module phaser3-rex-notes/plugins/gameobjects/containerlite/ContainerLite.js the last comma in the assigned object is removed.
Object.assign(
ContainerLite.prototype,
....
Children,
Components.Alpha,
Components.Flip , <------ this comma need to removed
);
Thanks for your great plugins!
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scenemanager/#start-scene
Phaser v3.15.1, I didn't found launch method, maybe it's deprecated.
scene.scene.launch(key, data);
is it possible to scroll gridTable horizontally in rexUI ?
Hi and thank you for these amazing plugins!
I don't know whether it's a bug or not but playing around with the tabs plugin, if you just want leftButtons for example, removing rightButtons results in grid table not rendering. I've read your notes but they don't say anything about if they are optional parameters. I tried with top or bottom and is the same. You can try it in your fiddle https://codepen.io/rexrainbow/pen/BGKvXK?editors=0010
In the following documentation page:
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/board/#tile-position-world-position
The part about board.forEachTileXY has incorrect definition; it suggests that "order" should somehow be part of the callback, when it really should follow the "scope" as the 3rd argument of forEachTileXY, rather than the third argument of the callback.
board.forEachTileXY(function(tileXY, board, order) {
// var tileX = tileXY.x;
// var tileY = tileXY.y;
}, scopr);
SHOULD BE:
board.forEachTileXY(function( tileXY, board ) {
// var tileX = tileXY.x;
// var tileY = tileXY.y;
}, scope, order );
Please add for this class method of forced cleanup(with/no completion signal) . This is useful when one of the actions may fail and never emit complete signal. Thx.
Please can you provide a demo with sprites (images) rather than game generated graphic objects...
It works fine using the demo, but when I use sprites I have issues clicking on and using the control.
It seems to only trigger if clicked in the top left, and then dragged around. Clicking in top right or bottom half of virtual joystick control does not work.
x: this.cameras.cameras[0].worldView.width - (this.vjRadius * 2),
y: this.cameras.cameras[0].worldView.height - (this.vjRadius * 2),
radius: this.vjRadius,
fixed: true,
base: this.add.sprite(0, 0, 'joystick-bottom'),
thumb: this.add.sprite(0, 0, 'joystick-top'),
enable: true
Hi,
I am running Phaser within a Cordova / Phonegapp application so that I can combine various technologies in my app. Because of this, I am not able to use the import functionality to load the rexplugin, so using a workaround I am doing this:
In my index.html I have the following code (short snippet, not full code)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/phaser.min.js"></script>
<script language="javascript" type="module">
import * as UIPlugin from '../Objects/rexuiplugin.min.js';
window.UIPlugin=UIPlugin;
</script>
</head>
<body>
<div id="app" class="color-theme-white theme-blue">
<div class="page-content page_image">
<div id="game" class="row">
</div>
</div>
</div>
<script src="js/app.js" type=""></script>
</body>
</html>
Then in my app code, which is fully cordova compatible, I use the following code to load rexuiplugin:
function delayedStartActivities(){
if (!window.plugins) {
setTimeout(delayedStartActivities, 300);
return;
}
appRequestReady();
//Keep screen awake
window.plugins.insomnia.keepAwake();
//Now load Phaser
phaserGame = new Phaser.Game(config);
const model = new Model();
phaserGame.globals = { model, bgMusic: null };
phaserGame.scene.add('Boot', BootScene);
phaserGame.scene.add('Preloader', PreloaderScene);
phaserGame.scene.add('Title', TitleScene);
phaserGame.scene.add('Options', OptionsScene);
phaserGame.scene.add('Credits', CreditsScene);
phaserGame.scene.add('Transition', TransitionScene);
phaserGame.plugins.install('rexUI', window.UIPlugin);
phaserGame.scene.add('Home', HomeScene);
phaserGame.scene.start('Boot');
}
This results in the message:
Invalid Plugin: rexUI
And phaserGame.plugins gives back 0 plugins, so it is not loaded.
For some reference, please note that I cannot load this in my config.js, as this is not a module file that can be imported and defined globally.
Hope you can explain if this is a bug, or I am doing something wrong here.
Good day!
Is it possible to add 'complete' event for the Scale and Fide clases like MoveTo when property destoy is false?
Thx.
I am struggling to find the virtual joystick of phaser 3. but I can't find that. Please help me.
ERROR in public/js/bundle.js from Terser
Unexpected token: punc ()) [public/js/bundle.js:180944,8]
the error is solved if I rewrite the function
from
get radius() {
var radius = this.cornerRadius;
return Math.max(
radius.tl.x, radius.tl.y,
radius.tr.x, radius.tr.y,
radius.bl.x, radius.bl.y,
radius.br.x, radius.br.y,
)
}
to
get radius() {
var radius = this.cornerRadius;
var max = Math.max(
radius.tl.x,
radius.tl.y,
radius.tr.x,
radius.tr.y,
radius.bl.x,
radius.bl.y,
radius.br.x,
radius.br.y
);
return max;
}
in ./plugins/gameobjects/shape/roundrectangle/geom/RoundRectangle.js
I don't understand why this happens...
I need to create the input box only 'number' type in phaser3,
Could you please rply immediately?
Hello, good work!
you have some mistake in https://rexrainbow.github.io/phaser3-rex-notes/docs/site/arcade/index.html#add-a-game-object-to-physics-world:
scene.physics.existing(gameObject, isStatic);
it have to be
scene.physics.add.existing(gameObject, isStatic);
How do I keep calling the update method while the thumb is not in the center?
I want to get this listener to also call the update method while the thumb is held in a certain position..
Here is an example https://codepen.io/dranitski/pen/oNNOoQY
Click anywhere to trigger game.destroy(true)
. If nine-patch on screen when game destroys - it causes error
phaser.min.js:1
Uncaught TypeError: Cannot read property 'removeKey' of null
at initialize.destroy (phaser.min.js:1)
at initialize.destroy (phaser.min.js:1)
at e.preDestroy (phaser.min.js:1)
at e.value (<anonymous>:1:8929)
at e.destroy (phaser.min.js:1)
at initialize.shutdown (phaser.min.js:1)
at initialize.destroy (phaser.min.js:1)
at initialize.h.emit (phaser.min.js:1)
at initialize.destroy (phaser.min.js:1)
at initialize.destroy (phaser.min.js:1)
Hi, your notes and examples is greatly helpful for me, but I tried to use the example of ui-textbox to apply to my game project, I don't know modified the code to make the
It always automatically be invisible after showing the last word in last page, but I want player to click the last page make it invisible.
i use phaser template for typescript Phaser3-Typescript-Template. Your extention was my first extention. But i got error like Property 'rexRoundRectangle' does not exist on type 'GameObjectFactory'
How to solve this problem.
"phaser": "^3.21.0",
i just wanted to create a rounded rectangle which i could load a physics body. it is not been with this.add.graphics
from Phaser.Scene
but your extention
i could create rectangle but i already get error
UPD: created interactive version for that issue https://codepen.io/dranitski/pen/dyyLNNM
Hi! To reproduce the issue you can include this code:
import NinePatchPlugin from '../../plugins/ninepatch-plugin.js'
class Demo extends Phaser.Scene {
constructor() {
super({
key: 'examples'
})
}
preload() {
this.load.image('bg3', 'assets/images/actionbox.png'); // 372 x 561
}
create() {
this.add.rexNinePatch({
x: 200, y: 430,
width: 372*2, height: 561/2,
key: 'bg3',
columns: [100, undefined, 100],
rows: [100, undefined, 100],
stretchMode: 0
}).setScale(0.5)
this.add.rexNinePatch({
x: 200, y: 200,
width: 372*2, height: 561,
key: 'bg3',
columns: [100, undefined, 100],
rows: [100, undefined, 100],
stretchMode: 0
}).setScale(0.5)
this.add.rexNinePatch({
x: 500, y: 200,
width: 372/2, height: 561,
key: 'bg3',
columns: [100, undefined, 100],
rows: [100, undefined, 100],
stretchMode: 0
}).setScale(0.5)
}
update() {
}
}
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
scene: Demo,
plugins: {
global: [{
key: 'rexNinePatch',
plugin: NinePatchPlugin,
start: true
}]
}
};
var game = new Phaser.Game(config);
into examples/ninepatch/test.js
for example, then download this asset
and save as assets/images/actionbox.png
, then run main=./examples/ninepatch/test.js webpack
from root of project
here is the problem:
the middle part of image is being scaled and have strange visual artifacts even when I expect rexNinePatch instance to not scale the middle part at all. What I want to do here is just to use my UI element image and scale in not distorting corners.
More - stretchMode seems not affecting the result at all.
I am using Google Chrome Version 78.0.3904.87 (Official Build) (64-bit)
Phaser 3.20.1
latest rexplugins (just pulled, commit a398246)
thank you for your time
See example\ui-textboix\textbox.bat
Hey Rex! First of all thanks for this amazing toolset. It does wonders!
I'm curious about commenting this line at TextStyle.buildFont
from TextBase
:
This works fine when there is not other BBCodeText elements on the same scene, but some weird lineHeight issues arise when adding multiple instances on a scene unless I remove this comment. The lines cover each other and become shorter.
But only uncommenting this brings some jittering when using it alongside TextTyping
, because the bold styling usually makes the font a few pixels taller.
I made this shameful ugly hack because I'm short on time to think on an elegant solution, but basically it should only rebuild metrics when the font or its size changes, not the style:
buildFont() {
const oldFont = this._font;
const newFont = this.fontStyle + ' ' + this.fontSize + ' ' + this.fontFamily;
if(newFont !== this._font) {
this._font = newFont;
if(!oldFont.match(new RegExp(this.fontSize + ' ' + this.fontFamily))) {
this.metrics = MeasureText(this);
}
}
return this;
}
What are your thoughts?
Good day! Thx for yor great plugins.
I have a bit problem with TextArea. When scrolling, the bottom strings do arise no smoothly, but sharp. Your demo has the same problem.
Video showing the problem (pay attention to the lower bound of TextArea):
https://youtu.be/koA-c2IH8oQ
in the newest version it seems a mistake caused by code maintainance:
in plugins\input\button\Button.js
class Button {
....
shutdown() {
super.shutdown(); // error throws: TypeError: (intermediate value).shutdown is not a function
there is no super class.. :)
Does the scroller plugin work? I cannot run the example.
when I copy the whole codes into phaser3-example project and run it, when I drag the table on the left, it not work, only mouse on the right-bottom,it works
https://codepen.io/rexrainbow/pen/XyJbWX?editors=0010 or
https://codepen.io/rexrainbow/pen/vPWzBa?editors=1010
Am a beginner for phaser 3. I want to user rex textbox(This Plugin only, Dont Need other Plugins). I don't know how install in ES6. Please Guide Me.
I need to install or download your plugin folder and import into my game and use it.
Please give Some instruction to me.
when got a button.click event, I need to know the click coordinate, so is there a way to retrieve the pointer object generated by Phaser?
this lib looks great and worth to have a try 👍
but before that I have a few of questions:
thank you~
Good day.
I get an error when i slide up the table cells if the height of all cells is less than the height of the gridTable.
For example, if in your simplecode you specify the number of cells equal to 10
Hi,
I might be missing something but using latest Phaser (3.17) I've copied rexvirtualjoystickplugin.min.js to a local plugin folder and instantiated it -
plugins: {
global: [{
key: 'rexVirtualJoyStick',
plugin: VirtualJoyStickPlugin,
start: true
}],
},
but when I try to call it from the scene
let plugin = this.plugins.get('rexVirtualJoyStick');
it returns null
pen: https://codepen.io/dranitski/pen/JjjVgjK
when I resize my game canvas that way my input element not updates its position. Seems like it renders on place it should before the scaling.
I guess that happens because I update canvas style manually via
game.canvas.style.width = 800 + 'px';
game.canvas.style.height = 600 + 'px';
Can I update input element somehow to respect new canvas size? Thanks in advance
Hi Rex.
First of all, I'd like to thank you for all the work you're doing. Thanks to you, the lives of thousands of developers around the world have become easier :)
I have a question about your WebFontLoader plugin. Maybe it's not the right place to ask, but still.
I download fonts in the preload() phase. We're talking about the 'Noto Sans' family, but perhaps the same problem is true for other fonts as well.
When I use the usual font "Noto Sans" - everything works as it should.
But the gap occurs when I try to use "Noto Sans Hebrew".
Judging by the Network tab, the font is loaded on time, before the text is initialized, but the first time it is used it does not work. For example, in the create() phase, I'm trying to create text - in Chrome, it will load a standard font for the system instead of special, but in Firefox, for example, it will not appear at all.
If you reload the page (without clearing the cache), it will work. If you clear the cache, the error occurs again.
What do you think may be the problem?
Thanks in advance for the answer.
Links to the demo repo:
https://gitlab.com/ikeba/phaser-typescript-skeleton
pages: https://ikeba.gitlab.io/phaser-typescript-skeleton/
Hi,
I am trying to use BoardPlugin, but when I add the plugin I get the following error in console.
BasePlugin.js:46 Uncaught TypeError: Cannot read property 'game' of undefined at BoardPlugin.BasePlugin (BasePlugin.js:46) at new ScenePlugin (ScenePlugin.js:34) at new BoardPlugin (board-plugin.js:20) at PluginManager.createEntry (PluginManager.js:591) at PluginManager.start (PluginManager.js:567) at PluginManager.install (PluginManager.js:460) at PluginManager.boot (PluginManager.js:166) at EventEmitter.emit (index.js:201) at Game.boot (Game.js:383) at HTMLDocument.check (DOMContentLoaded.js:38)
I've been debugging and the error is because when you instantiate the BoardPlugin class the builder only passes a pluginManager parameter but not the scene.
Therefore, the scene is of type pluginManager and pluginManager is undefined.
Is there a way to directly call the virtual joystick plugin file?
Because I'm having issues, I can't import it.
I'm new to JavaScript so I don't want to install node.js or other just for making a game.
Using script src doesn't work,
script type="module"
doesn't work too, using the import statement results in error.
Thanks for listening
In the imports of the Gashapon file, there is a typo in the import path.
import IsEmpty from 'rexPlugins/utils/Object/IsEmpty.js';
should be:
import IsEmpty from 'rexPlugins/utils/object/IsEmpty.js'
Otherwise you get an error similar to "Module not found Error: can't resolve..." where it specifies the above "Object" path in the Gashapon file.
My English is not good, use google translation for help.
I use GesturesPlugin.press and rexUI.toast.
When I showed taost a second time in pressstart.
Toast will flash.
The code looks like this.
const press = this.rexGestures.add.press(gameObject, { time: 1000 });
press.on('pressstart', (press) => {
this.rexUI.add.toast({
x: press.x,
y: press.y,
background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 20, '#ABABAB'),
text: this.add.text(0, 0, '', { fontSize: '24px' }),
space: {
left: 20,
right: 20,
top: 20,
bottom: 20,
},
}).show('message');
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.