Search the Community

I have an invisible mesh that is the parent of a few child boxes, ordered horizontally one near the other. I'm using the following line to figure out the size of a mesh: getBoundingInfo().boundingBox.extendSize.scale(2) When called on each of the child boxes, the vector returned is correct. When called on the parent mesh, (0, 0, 0) is returned. Is there a way to get the size of the parent, taking into account all of its children?

Refer to the link below, for billboard enabled meshes, I added mouse pick event so the camera will target to the mesh which being clicked. However, after click on the mesh which BILLBOARDMODE_ALL is enabled, I got the following error. I'd be really appreciated if anyone can fix this issue. Thanks. https://www.babylonjs-playground.com/#9XBPW4#2 if (!m.actionManager){ m.actionManager = new BABYLON.ActionManager(scene); } var act = new BABYLON.ExecuteCodeAction( BABYLON.ActionManager.OnPickTrigger, pick ); m.actionManager.registerAction(act); function pick(evt){ var mesh = evt.meshUnderPointer; camera.setTarget(mesh); }

Hi ! I precise that my question is only about meshes Should we prefer to load small objects (between 0 and 10 units for example, with a high precision like 5.554) or it does not impact performance at all and we can work with huge numbers as well (10k, 100k) ? I speak about width/height of a box for example. I guess the more important things are the number of vertices/edges/facets and how impostors are used (mesh vs box), but I would like to know regardless of that, if the size of meshes matters. Same for textures : should we prefer a texture repeated 1000 times on a plane or a bigger texture repeated 10 times for example ? Thank you

I am having some basic syntax confusion... i have declared a sprite... var taxi = this.add.sprite(100, 100, 'taxi').setOrigin(0, 0); and now would like to resize it I have tried various combos (including ideas from phaser2 i found), what am I doing wrong? taxi.width = 25; taxi.setWidth = 25; taxi.setSize = (25,25); Any help for noob here?

Hello, Is there a way to get the size of an object after the window has been resized? (Whole scene gets scaled down/up). planet2.getBoundingInfo().boundingBox.vectorsWorld; but it only displays 1.25 no matter how much I resize my browser window

hi, anyone knows why changing the value of "pointSize" doesn't influence the size of points of a shaderMaterial? shaderMaterial.pointsCloud = true; shaderMaterial.pointSize = 10;

I have been looking at this: http://phaser.io/examples/v2/games/gemmatch example. The columns and rows are positioned starting at the game origin, which can cause the sprites to appear off centre, when looked at relative to the canvas/game border. I have aded a couple of lines of code which [visually] centres the 'gems'. The code lets you adjust the GEM_SPACING and/or canvas/game dimension values, and updates the 'gems' [group] [*correction, each 'gem'] anchor value accordingly. However, what I can't seem to do, is to create a margin between the canvas edges and the 'gem' [group], without breaking the code. All suggestions, welcome. Thanks.... -u Correction above in bold. I don't know why this text has strikethrough applied, or why some of the above text does too!

I'm trying to add a collision box to a sword swing. I'm using one sprite for the swing and rotating it 0, 90, 180, 270 degrees, depending on direction. As physics bodies are not affected by their sprite's rotation, I'm using body.setSize(width, height, offsetX, offsetY) to move the collision area depending on direction. Problem: It seems that (width, height) updates earlier than (offsetX, offsetY), or that the new offset is delayed one update. This leads to the hitbox reaching beyond the player's attack range. How can I avoid this? One way to easily test this is by calling sprite.body.setSize( <randomX>, <randomY>, <randomOffsetX>, <randomOffsetY> ). The sprite's angle does not affect this. ^ The collision area updates its size first, and later snaps to its new offset. ^ The sword sprite, 48x48. Red box indicates where the body's collision area should be.

Hey, I was wondering how to disable zooming on my game on mobile, because it zooms in and there is no way to zoom out. I use Game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; or alternatively how to allow player to zoom out of the game, to make it again full screen (on mobile)

Hey guys, I have made some scaling of the game via CSS so I can have my game always the proper size in the browser window. However, I lose my onInputDown because for some reason the game container overflows but visually is okay.... here is my CSS styling (visually it looks perfect): html { height: 100%; margin: 0; padding: 0; } body { height: 100%; margin: 0; padding: 0; } #content { height: 100%; } #content > canvas { margin: 0 auto; height: auto !important; width: auto !important; max-height: 100%; max-width: 100%; position: relative; top: 50%; transform: translateY(-50%); } Here is my game init class: import Boot from 'states/Boot'; import Preload from 'states/Preload'; import GameState from 'states/GameState'; import * as Constants from 'data/Constants.js' class Game extends Phaser.Game { constructor() { let height = window.screen.height; let width = window.screen.height / Constants.SIXTEEN_TO_NINE; super(width, height, Phaser.AUTO, 'content', null); this.state.add('Boot', Boot, false); this.state.add('Boot', Preload, false); this.state.add('GameState', GameState, false); this.state.start('Boot'); }; } new Game(); If I don't have any css code - the input works. I believe it is because the game is still bigger than what it visually appears. Has anyone had this issue?

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.

Hi, new to Phaser. I am having a little difficulty understanding the concepts of the Stage vs the World, which one controls what is rendered, and why they apparently don't match my Game dimensions. I am using Phaser 2.6.2. I create a Game with width 607 and height 1080 (16:9 portrait, would be pixel-perfect in fullscreen), and in my boot script I set scale mode to SHOW_ALL and set pageAlignHorizontally to true. In my first level, I set the game.stage.backgroundColor, and I create a group of buttons, and I set the buttonGroup.alignIn(this.game.world.bounds, Phaser.BOTTOM_CENTER). As expected, I see what appears to be the correctly sized rectangle, scaled down slightly to fit within my non-fullscreen browser window, with a row of buttons at the bottom. However, I noticed that there seems to be an "edge" in my game where rendering stops. I added a debug rectangle set to the bounds of my button group, and I didn't see it. I then set the y value to be bounds.y -100, to push it "up", and this is what I see: You can't see the pointer, but you can see the pointer debug location, the y value is 919, and the pointer is a the bottom edge of the visible part of the green debug rectangle (that should be the height of the buttons). And you can also see that rendering is getting cut off on the right, before the right edge of the Game (as seen by the background color). But yet - the buttons are still visible, and they are below the point where the rendering seems to be getting cut off? I then did some logging, and found out that the bounds of the World and the Stage do not match the dimensions of the Game (these are numbers for game.world.getBounds() and game.stage.getBounds()): world x: -156 world y: 0.5 world height: 75 world width: 920 stage x: -156 stage y: 0 stage height: 920 stage width: 920 Now, the 920 height of the Stage seems to match where the rendering is getting cut off at y = 920 in the screenshot. The World numbers make no sense to me at all, and I can't figure out what corresponds to the right side edge of the rendering. I was under the impression that without explicitly resizing the World, it would be the same dimensions as my Game? So my questions are: What is causing the rendering to cut off where it is? Does the World bounds define what gets rendered, or does the Stage bounds define what gets rendered? Why aren't my Stage and World dimensions the same as my Game, considering I did not explicitly size or resize either one? Why are the buttons still visible even though they appear below the line where rendering is getting cut off? If the Stage bounds do not match the dimensions of my Game, why did game.stage.backgroundColor appear to correctly color in the the background of what I expected the Game dimensions to be? Bonus question: The answer here: Says that you can put UI elements in the Stage.. should I be adding my buttons to the Stage? How exactly do you do that? I had added them by adding a group to the Game, then adding the Button objects to the group. Does that mean they live in the World? Or the Stage?

What size should we be using to generate babylon HDR using BABYLON.Tools.generateBabylonHDR ??? The cabman actual image resolution is 3200 x 1600 ... the cube face size is 2048... But if i try to pre-process a cabman at 2048 full resolution IT NEVER FINISHES ... over 12 hours still never finishes... Everywhere i see HDRCubeTexture is always using SOME MUCH LOWER (like 256 or 512) cube map size then the actual cabman face size. Is there some SCALE or RATIO we should using OR are we supposed to trying to run HDR at whatever the actual cabemap face size ???

Is there anything like "Stage Width and Height"... I am asking because i am getting some weird scaling where the X scale looks like it "real skinny" ONLY when i change the #renderCanvas to try and make 600 x 900 canvas center in page... Centers and looks great but my models look "SQEEZED": For now i get by by just adding a little KLUDGE to the scaling.x by giving it an offset... Should look more like this: Is there some kind of stage width and height and or scaling options we have to set when not using a canvas at 100% Here my my #css: #cvs { position: absolute; width: 600px; height: 900px; margin: auto; top: 0; left: 0; right: 0; bottom: 0; padding: 0; opacity: 0; z-index: 0; outline: none; touch-action: none; -ms-touch-action: none; background-color: #000000; } Anyone Got Any Ideas On This One ???

How do we define the size of our collision box (i goes would be the same for camera and physics)... Do we use mesh.ellipsoid and mesh.ellipsoidOffset to actual define our collision bound box ??? Don't seem to see a mesh.collisionRect or anything like that. I am trying to emulate the BOX and CAPSULE collider functionality in unity where you drag the "collider rect" to define size of collision box or capsule. I would then like to store those values on my node.metadata and use those to "DEFINE" the babylon.mesh collision rect

Hey everyone, first post here! I'm putting together a little web GUI using Angular2 and pixi, and I'm looking for a way to have the pixi canvas automatically resize to be inline with its parent element (in this case it's an angular2 component). Below is the angular component that creates the pixi canvas and places it into the DOM. You can see that right now its size is being set to a fixed 256, 256 by the stub methods I created. What I want is the canvas to automatically fill all of the available space of it's parent container when it loads, and also resizes responsively with different resolutions, etc. Similar to the behaviour of the CSS { height: 100%, width 100% } @Component({ selector: 'pixi-component', templateUrl: './pixi-component.component.html', styleUrls: ['./pixi-component.component.css'] }) export class PixiComponentComponent implements OnInit { constructor() { } ngOnInit() { this.generatePixiCanvas(); } generatePixiCanvas() { //Create the canvas and add it the DOM... var renderer = PIXI.autoDetectRenderer(this.getParentDivHeight(), this.getParentDivWidth()); document.getElementById('pixi-component').appendChild(renderer.view); //Create a container object called the `stage` and render it... var stage = new PIXI.Container(); renderer.render(stage); } getParentDivHeight() { return 256; } getParentDivWidth() { return 256; } } Heres a snippet of the HTML in case you want to see it: <div id="canvas-pane" class="flex-item flex-container flex-container-vertical"> <div id="canvas-pane-header" class="flex-item"> <div id="canvas-pane-header-title"> </div> </div> <div id="canvas" class="flex-item"> <pixi-component id="pixi-component"></pixi-component> </div> </div> How can I achieve this goal?

I figure out that if we resize browser window on 1/4 of full screen size, we get better FPS. Can we make window resolution to be as 800x600 of full size screen, but the window we see is full size of screen? Is there any way to meke full screen size browser window with 800x600 resolution with babylon or js API? How to do it with babylonjs API? greetings ian

Hey, I was wondering if actualSize was intended to give the size after scaling ? Is there a way to get the actualSize after scaling ? For now im using this : var spriteSize = new BABYLON.Vector2(sprite.size.width, sprite.size.height); var scaledSpriteSize = spriteSize.scaleInPlace(sprite.scale); It would be nice to have access to the original size, and the scaled size in separate properties... Also, I was wondering what you think about making vector2 and size function compatible, meaning Vector2.subtract(Size) would work... some kind of abstraction object that transforms every vector/size into a true vector of the same dimension but without the unit (x, width etc...). This would allow for a more fluid development, no @Deltakosh @Nockawa ?

Hey everyone, So I have been fighting Sprite2D for hours. I am developping a 2D version of my project and I simply wanted to draw a single sprite2D on my canvas but couldn't, the sprite was not showing. The texture was loading for sure because I could use it on 3D meshes. Another post talked about a similar issue and although the post says the problem was solved, it does not say how or what was really causing it : I am not showing all my experimenting because it would be meaningless, but I kept getting this warning: (index):1 [.Offscreen-For-WebGL-0x7f84b30bdc00]RENDER WARNING: there is no texture bound to the unit 0 and all the posts on the web about those kind of errors were very foggy... hours passed, thought it was the server, the loading, the transparency... without having any kind of improvement, so I started to cut everything from my code util I was only creating an engine and basically copied paste the babylon example http://babylonjs-playground.com/#20MSFF#16. By th way I got also this very benign warning caused by the BABYLON.Texture.NEAREST_SAMPLINGMODE : [.Offscreen-For-WebGL-0x7f84b30bdc00]RENDER WARNING: there is no texture bound to the unit 0 babylon.max.js:7027 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead. this warning comes from this line _this._workingContext.webkitImageSmoothingEnabled = false; on 7027 babylon.max.js. But this warning has nothing to do with the sprite2D not showing. To cut a very long story short : When settings = {} passed to new BABYLON.Sprite2D do not contain a spriteSize property, the sprite.size SHOULD be set to the actual texture size, but it is in fact set to size(0,0) and hence the sprite is not displayed. This behavior does not seem to be on purpose because the docs clearly state the sprite would take the size of the texture. The code also point in that direction (42630 babylon.max.js): function Sprite2D(texture, settings) { if (!settings) { settings = {}; } _super.call(this, settings); this.texture = texture; this.texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; this.texture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE; this.size = settings.spriteSize || null; // LOOK HERE ! this.spriteLocation = settings.spriteLocation || new BABYLON.Vector2(0, 0); this.spriteFrame = 0; this.invertY = (settings.invertY == null) ? false : settings.invertY; this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel; this._isTransparent = true; if (!this.size) { /// AND HERE !! var s = texture.getSize(); this.size = new BABYLON.Size(s.width, s.height); } } So I tried to understand why this.size was not set to the texture size... So first of all, when the super is called the size is set to (0,0). Then it SHOULD be set to null if spriteSize is not set. But there is an interaction between getters and setters. Since size is a SmartPropertyPrim... the GETTER is called everytime you call the setter on 36968: SmartPropertyPrim._hookProperty = function (propId, piStore, typeLevelCompare, dirtyBoundingInfo, kind) { return function (target, propName, descriptor) { var propInfo = SmartPropertyPrim._createPropInfo(target, propName, propId, dirtyBoundingInfo, typeLevelCompare, kind); if (piStore) { piStore(propInfo); } var getter = descriptor.get, setter = descriptor.set; // Overload the property setter implementation to add our own logic descriptor.set = function (val) { // check for disposed first, do nothing if (this.isDisposed) { return; } var curVal = getter.call(this); if (SmartPropertyPrim._checkUnchanged(curVal, val)) { return; } // Cast the object we're working one var prim = this; // Change the value setter.call(this, val); // Notify change, dirty flags update prim._handlePropChanged(curVal, val, propName, propInfo, typeLevelCompare); }; }; }; The getter is : Object.defineProperty(Prim2DBase.prototype, "size", { /** * Size of the primitive or its bounding area * BEWARE: if you change only size.width or height it won't trigger a property change and you won't have the expected behavior. * Use this property to set a new Size object, otherwise to change only the width/height use Prim2DBase.width or height properties. */ get: function () { if (!this._size || this._size.width == null || this._size.height == null) { if (Prim2DBase.boundinbBoxReentrency) { return Prim2DBase.nullSize; } if (this._boundingSize) { return this._boundingSize; } Prim2DBase.boundinbBoxReentrency = true; var b = this.boundingInfo; Prim2DBase.boundinbBoxReentrency = false; return this._boundingSize; } return this._size; }, ... So basically a size (0,0) is returned if size is null sooo this: if (!this.size) { /// AND HERE !! Will never be true. I think. Hope it helps - time to sleep !

I'm using AssetsManager to load a list of files. Is there a way to tell a loaded file's size? e.g. by the IAssetTask returned onTaskSuccess. I'd like to avoid using SceneLoader as I'd need to create predefined .babylon files to load, and I'd like to avoid that. (assuming I understand SceneLoader properly)

Hi I am facing a problem, a little one that made doubt myself! I am inserting a sprite, which is 1000px width (it's a placeholder for bigger ones in production version) It's inserted but shrunk! Here's My code Booting up: var game; window.onload = function() { game = new Phaser.Game(1000, 400, Phaser.AUTO); // Add the States your game has. game.state.add("Boot", Boot); game.state.add("Menu", Menu); game.state.add("Preload", Preload); game.state.add("Level", Level); // Now start the Boot state. game.state.start("Boot"); }; Boot.prototype.init = function() { this.input.maxPointers = 1; // Setup the scale strategy game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; //OR ANY OTHER ScaleManager game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; }; My level: /** * Level state. * Started already! */ function Level() { Phaser.State.call(this); } /** @type Phaser.State */ var proto = Object.create(Phaser.State); Level.prototype = proto; Level.prototype.create = function() { //Resizing the World to fit the Sprite inside it! game.world.setBounds(0, 0, 1000, 400); game.camera.setSize(100, game.world.height); //Does not work too game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.restitution = 0.1; game.physics.p2.gravity = 1400; this.addStreet(); this.addObstacles(); }; Level.prototype.update = function() { move_camera_by_pointer(game.input.mousePointer); move_camera_by_pointer(game.input.pointer1); }; Level.prototype.addStreet = function() { // add the "the road" this.street = this.add.sprite(0, 400, "street"); //Added at the bottom left, but it doesn't work either this.street.anchor.set(0, 0); //Bodies are not my problem, it works nicely this.game.physics.p2.enable(this.street, true); this.street.body.kinematic = true; this.street.body.loadPolygon("streetps", null); //For debugging this.street.inputEnabled = true; this.street.input.enableDrag(true); }; Level.prototype.quitGame = function() { this.game.state.start("Menu"); }; //For debugging function move_camera_by_pointer(o_pointer) { if (!o_pointer.timeDown) { return; } if (o_pointer.isDown && !o_pointer.targetObject) { if (o_mcamera) { game.camera.x += o_mcamera.x - o_pointer.position.x; game.camera.y += o_mcamera.y - o_pointer.position.y; } o_mcamera = o_pointer.position.clone(); } if (o_pointer.isUp) { o_mcamera = null; } } That code results in Video_2016-08-24_004305.wmv And this is my "street" image (actually the name is a place holder too and i kept it)

Is it possible to change the tilemap size during gameplay in phaser? Thanks.

Hi again forum, From the many great features I have learned, I think that render target texture is the best thing I have come across yet. The ability to produce dynamic live reflections is really awesome. But there is one thing that bugs me. And yes, I have a playground too http://www.babylonjs-playground.com/#1NP9BY You will see I have added a cube to the reflection and refraction playground. While the reflection in the sphere looks realistic, in the cube it doesn't. As you will move the camera away from cube, the size of the clouds don't change. It always renders the same amount of texture(the sizes of the meshes in the renderList don't change) regardless of where the camera is from the mesh. Compare that to a mirrorTexture , once you have the mirrorPlane defined, the reflection is lifelike. Moving away and close to mirror gives accurate results. Is there some setting to have the cube texture behave like that on a cube?

I have explosion spritesheet which is 2048x128 size. As you can see it is POT(power of two) for width and height, but still I get error when loading my game: phaser.min.js:6, Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object] Did I miss to set up some setting in Phaser or just the texture is too large in width? I cleared my cache btw and still get the same error. The spritesheet has 16 frames so i could possibly create an atlas 4x4 but still, should i bother?

hi i am trying to design a game like Close Up game(https://itunes.apple.com/us/app/close-up-pics-guess-whats/id632311326?mt=8) how can i zoom image in the fixed box? when i set sacle property ,it change width and Height image. i want to fix width and height when i change scale property. and show like below image. i see this link http://phaser.io/examples/v2/display/round-pixels ,that code change size of image box. i need to scale my image in the fixed box . please guide me thanks.