Website URL

Twitter

Skype

Location

Interests

Hello everyone,
When I display a sprite in front of a mesh that has emissiveTexture or emissiveColor, the mesh can be seen through the sprite.
for example : https://www.babylonjs-playground.com/#4H81K3
Is there a way to occlude the emissive object with a sprite (prevent the emissive mesh to be seen through the sprite)?

Hi all,
I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this:
What I have so far is just a test of one of the sprites I put together:
mae.mp4
The sprite is made using just one layer, at the moment.
Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that.
So, examples/tutorials/advice I'm looking for regards:
-Building multiple menus of images, each accessible by clicking on relevant category titles.
-Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc)
-Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time)
-How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?)
Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too.

Hi all,
Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour.
The layers so far are added like so:
Cat Body
Pupil
Face/Eye shape
Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct.
This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this:
This is the relevant code to trigger the event:
facekey = 'catfacegoth';
create function;
player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled();
playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled();
playerface = this.physics.add.sprite(260,350,facekey).setInteractive();
normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); });
gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');});
update function:
player.anims.play('default', true); //body animation
if(facekey == 'catfacegoth'){
playerface.anims.play('gothblink', true); // face/eye shape
playereyes.anims.play('blink', true); //this is the pupil layer
}
if(facekey == 'catface'){
playerface.anims.play('faceblink', true); // face/eye shape
playereyes.anims.play('blink', true); // pupil
}
My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame.
Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?

Hi,
This is probably a misunderstanding on my part, but how can I get the light to shine on either of the objects in the PG?
Meshes work just like I thought, I can display either of them by changing the bitmask.
http://www.babylonjs-playground.com/#XUH5GR

Hi,
I want to display my webcam content on my scene. In order to do this, I tried to create a layer set in background on which I apply a video texture. I passed a video DOM element to this texture. This video has a stream for source that is obtained from the getUserMedia promise.
It works but rapidly the FPS drop and I don't know why. Maybe the size of the video is too large, maybe I provided the wrong parameters to the texture. I don't have any idea but it causes an issue.
Here is a PG for testing : https://www.babylonjs-playground.com/#FF3BPV
Thanks,

Very sorry if someone has asked this before, but I searched the internet for two days now and I have yet to find the answer to this.
So, what I want to know is how can I tell the size (width, height) of the platform that a player/enemy is standing on, with platforms that are based on a tilemap/layer?
Take for example this game phase example starstruck: https://phaser.io/examples/v2/games/starstruck
How can I tell the size of that platform the mascot falls on first?
Why do I want to know this? I want to know so that I can place enemies on the map, have them go back and worth without falling off a platform.
I have seen this be done when platforms are created as a group, but not with platforms in a layer.
Thank you very much for any help.

Did we change the Debug Layer to the ne Debug Layer the BabylonJS guys have been working on... If so... Has the API changed to test for visible and showing the debug layer... If not... i now all of sudden get an error when trying to bring up the debug layer (using latest dist preview release)... No message ... just a yellow exclamation sign.
Any body else getting this with latest list preview (12/8/16) ???

Hi everyone!
Is there any way in Babylon.js to combine multiple textures, or multiple materials on a single mesh?
I know that it's possible to apply diffuseTexture and ambientTexture on a material at once, but if I have more than 2 textures?
Like for example, it could be used for maps, having a satellite image as a base texture and then applying a layer with ambient pressure, and UV index, and wind direction, and whatnot

Hello,
I can't seem to understand why this is happening:
Here, I just want to load a tilemap made in Tiled, it's a 35*15 tile map, each tile is 64*64px as are the tile in my tilesheet (2240*960 in total).
So I followed this example from Phaser (apparently some of them are not accurate...) and the layer doesn't resize.
I get that on the browser the map is displayed with the total width and height inside the game element which has the size I want, and that's my problem !

How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container?
My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts:
layer 1 should be rendered beneath the player
layer 2 should be rendered above layer 1
layer 3 should be rendered above the player and above layer 1 and layer 2
layer 4 should be rendered above everything else for debug information
In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?

Hi guys,
I have a problem when try to resize the world.
This is the code:
this.map = this.game.add.tilemap('test');
this.map.addTilesetImage('tile', 'tile');
this.layer = this.map.createLayer(0);
this.map.setCollisionBetween(1, 100, true, 'blockedLayer');
this.layer.resizeWorld();
In the photos you can see that the world is not resizing, i dont know what is happening, any idea? i want to try to resolve this for myself XD

Hi everyone,
I'm trying to make a platformer who can run on any smartphone.
I have a tilemap with theses features :
- 40 Tiles heights
-100 Tiles widths
- Each tiles is 64x64px.
To calculate my scale I simply use that as reference :
var SCALE = window.innerHeight/ 2560;
//64*40 = 2560px, the height of my tilemap
I already made a platformer with 16x16px tiles and every scale worked very well, so i just copy paste that simple code :
map = that.game.add.tilemap('objects');
map.addTilesetImage('items', 'tiles');
map.setCollisionBetween(0, 16);
that.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
layer = map.createLayer('mario_niveau_1');
layer.debug = true;
layer.setScale(SCALE,SCALE);
layer.resizeWorld();
That's work when my SCALE is better than 1 but not when it's less.
My collision are always good, but the map don't show up like you can see below
Any ideas ?

Hi guys, this is my first post so if this is somewhere it's not suppose to be i'm really sorry.
I created a layer with Tiled and want to set collision between the sprite and all the tiles in the layer but it doesn't seem to work. (The map showed up and everything)
Here is my code
var create = function(){
// Razor.game.add.sprite(0, 0, 'bg');
map = Razor.game.add.tilemap('gamemap', 16, 16);
map.addTilesetImage('tileset','tiles');
layer = map.createLayer(0);
layer.resizeWorld();
map.setCollisionBetween(0, 5049);
Razor.game.world.setBounds(0, 0, 3200, 32280);
Razor.keyboard = Razor.game.input.keyboard;
Razor.game.physics.startSystem(Phaser.Physics.ARCADE);
player = new Player(window.innerWidth/2, window.innerHeight/2);
// Razor.game.camera.follow(player);
}
var update = function(){
Razor.game.physics.arcade.collide(player, layer);

Hi guys,
I've built one or two small, simple games with Phaser before but this is the first time I'm working with tilemaps. Hopefully someone can offer some advice.
I'm working on a topdown game. I created a tilemap in Tiled with 3 layers. (floor, wall 1 and wall 2 ). The problem is I can get collisions to work on a single layer if I combine the wall layers into the same layer as the floor (so I just have one layer), but I can't get the player to collide with a second layer.
TLDR: Is is possible to set up tilemap collisions with multiple layers?
Thanks in advance. I've been stuck on this all day.

Hi there, I'm having an issue where a child sprite does not respect the depth of the parent's group. Meaning that other objects will render on top of the parent sprite as expected, but not the child sprite, which appears on top of both the parent (expected) AND other objects (unexpected). First, I am extending the sprite class: var Wall = function (game, x, y, width, height) { Phaser.Sprite.call(this, game, x, y, 'wall-border'); this.width = width; this.height = height; this.anchor.setTo(0, 1); game.physics.arcade.enable(this); this.body.immovable = true; var child = this.addChild(game.add.tileSprite(0,0,100,100,'wall-pattern')); // this.game.add.existing(child); // (THIS LINE IS THE PROBLEM) child.x = this.x + 10; child.y = this.y - 10; child.anchor.setTo(0, 1); child.width = this.width - 20; child.height = this.height - 20;}The problem is that the tileSprite created as a child does not appear in game unless the commented out line is added, but if so, it appears on top of all other objects (does not respect the parent's group ordering). Do I need to add the child to the same group as the parent or....? I know I'm doing something dumb, so any guidance is appreciated. Thank you!

Hi! I want to start drawing my layers of a tilemap in a specific X position of the world, so I do: this.layer2 = mapa.createLayer('detalhes');this.layer2.fixedToCamera = false;this.layer2.scrollFactorX = 0;this.layer2.scrollFactorY = 0;this.layer2.position.set( MyXposition, 0);That's ok but when I do that, all the collisions get lost! (they work if I don't change the X position) How to handle or reposition the collisions? Thanks

Hi all, I've been trying to achieve a certain effect. I have two polygons, one of which is still while the other moves, and when they overlap, I want to have the still polygon on top. However, it always seems to be the moving polygon that remains on top. I've been trying to use groups following the example here, to no avail. Here is (most of) the offending code: var LayerTest = { preload: function () { }, create: function () { game.world.setBounds(-SIZE_X / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2); var center_group = game.add.group(); center_group.z = 1; var center_hexagon_graphics = new Phaser.Graphics(game, 0, 0); var center_hexagon_poly = buildRegularPolygon(0, 0, 6, 40); center_hexagon_graphics.beginFill(CENTER_COLOR); center_hexagon_graphics.drawPolygon(center_hexagon_poly); center_hexagon_graphics.endFill(); center_group.add(center_hexagon_graphics); var moving_group = game.add.group(); moving_group.z = 0; moving_graphics = new Phaser.Graphics(game, 0, 0); moving_group.add(moving_graphics); }, update: function () { var moving_poly = new Phaser.Polygon([ new Phaser.Point(-SIZE_X / 2 + tick, -10), new Phaser.Point(-SIZE_X / 2 + tick, 10), new Phaser.Point(20 - SIZE_X / 2 + tick, 10), new Phaser.Point(20 - SIZE_X / 2 + tick, -10), ]); moving_graphics.clear(); moving_graphics.beginFill(ALT_COLOR); moving_graphics.drawPolygon(moving_poly); moving_graphics.endFill(); tick++; }};This particular example creates a regular hexagon around (0,0), and a small yellow square in the left side of the screen that then moves right and overlaps with the hexagon. Even though I set moving_group.z to 0 and center_group.z to 1, it always paints the small square on top. I also tried to do without the groups, setting the z indices on the graphics directly, but it didn't make a difference. Any help will be much appreciated. layer-test.zip