Search the Community

Hi everyone, I'm new with PIXI, and I'm wondering this situation. I want to make a rectangle, and its border can be changed when we hover. I tried search on Google and almost people say I should redraw the rectangle everytime mouse over or out the rectangle to change its border. Like this: But then I ask myself why don't create another rectangle on top of the first rectangle, set it the color we want, make it invisibe and only show it when hover. By doing this we don't have to redraw the original rectangle everytime mouse hover. This is good for optimization, I think. Does anyone can explain me this is good or bad? Thank you for your answer.

I'm finding the graphics examples very impressive, but it is the simple things that are tripping me up. I know I must be missing something simple, but is there a simple way to draw a rounded rectangle in Phaser 3?

http://www.babylonjs-playground.com/#L1SBDY As you can see above, my GUI's output is all wrong. What could possibly be the issue here?

Hello everyone, I'm migrating a script from canvas2d to the new gui. So far so good but I still get some questions. For the first question, I made a basic PG. I would like to know if it's possible to have a rectangle that will adjust width and height based on a textblock text size and margins. https://www.babylonjs-playground.com/#XCPP9Y#227 For the second question, I had a button to disable Canvas2D like this : canvasUI.levelVisible = 0; I understand that's not possible with the AdvancedDynamicTexture but is there something I can use to hide everything with one command ? Thanks !

I’m investigating possibilities of porting the graphical part of an OpenGL desktop application to BABYLON.JS. The basic displaying went easy but (for me) the difficult part to create meshes that are 2D forms in a 3D space (please have a look into this 10 seconds video: https://www.youtube.com/watch?v=gFqANSbdtnE). Basically, the rectangles are always facing the camera, but in the same time are rotating and resizing with the entire scene. What would be the right (and hopefully the easiest) way to make that working? Additionally, I would like to display “tool tips” (mesh names) on selected meshes (and when the mouse pointer hovers over a mesh). That part I could easily program myself (except for hovering), but only by using the 3.0 pre-release (see playground https://www.babylonjs-playground.com/index.html#RBP60B). I’ve copied that solution from the GUI playground and it works just fine. Am I using this functionality properly?

Hi, I know this should not be BabylonJS issue, just intend to aware people that Lenovo Phab 2 Pro may have canvas rendering issue. I am using chome to open the webpage, while firefox and opera had no problem displaying the 3D scene. below are screenshots of webpage with webgl content: The Sponza Demo: www.babylonjs.com/demos/sponza/ The Espilit Demo: https://www.babylonjs.com/demos/espilit/ The Instances Demo: https://www.babylonjs.com/demos/instances/ And all ThreeJS projects I had viewed so far have this issue too: Lasertown: http://oletus.github.io/lasertown/ The Aviator: https://tympanus.net/Tutorials/TheAviator/ It looks like the major area of the canvas is covered, and leaving only a small rectangle area at the left bottom corner to be viewable, I am able to apply user input beyond the viewable rectangle area to navigate the scene(for example the Espilit demo). I had file an bug report to chrome and intend to file another one to lenovo as well.

Is there a method that works even after scaling and changing screen size? I am using the "drawRect" method in Phaser.graphics but I don't know how to get the bounds of the shape.

I want to set the bounding box of text. Thanks!

Hi friends. I found some strange behavior while working on an app. This issue is demonstrated best on this codepen As you can see, the update function is designed to update the width property, but as you also see - it also changes with position of the element - dragging it left. I can't figure out why. Any advice you can offer on this? Thanks in advance Yair

It might just be me, being a bit slow tonight, but I'm having trouble updating the width of a rectangle. I was thinking it's something like someRect.width += someValue, but that doesn't seem to work. Can somebody help me out here?

Hi, im newbie in Phaser developement and I'm trying to create "speech bubble with text"... It should looks like this: I dont know how to create rectangle below text which will cover all text area. In documentation there are only text color and no option to set background of text. Any suggestions? (or example code? ) :-)

i wrote this utility function to save some space: drawRect(graphics, x, y, width, height, bSize, bColor, bAlpha, fColor, fAlpha) { var rect = gameObject.add.graphics(x, y); rect.lineStyle(bSize, bColor, bAlpha); rect.beginFill(fColor, fAlpha); rect.drawRect(0, 0, width, height); rect.endFill(); graphics.addChild(rect); return rect; } The graphics parameter is a top level graphics object. My question is, at the call rect.drawRect(0, 0, width, height), is the rectangle drawn at (0, 0) in the rect world or is (0, 0) in the graphics object aka top level container?

Damn I have buggy code Trying to check if mouse points x/y position is in bounds of a given graphics object called leftShelveGraphics. I do this: gameObject.physics.enable(leftWallGraphics, phaser.Physics.ARCADE); update: function () { console.log(leftWallGraphics.getBounds().x + ", " + leftWallGraphics.getBounds().y + ", " + leftWallGraphics.getBounds().width + ", " + leftWallGraphics.getBounds().height + ", " + horzBaffleObj.x + ", " + horzBaffleObj.y); if (phaser.Rectangle.contains(leftWallGraphics.getBounds(), horzBaffleObj.x, horzBaffleObj.y)) { console.log("I am over leftWallGraphics"); } } But the above console.log() prints 0,0,0,0 for x/y/width/height. horzBaffle.x/y are actual values of the object I move on update. Am i missing to set up something? leftShelveGraphics contains other graphical shapes like polygons, rectangles, and more complex graphics like shelves. EDIT: leftShelveGraphics is child of larger container graphics object called constrGrObject which is child of gameObject.world. Could this be causing some issues?

I found this topic where it says that graphics object in phaser has hitArea that can be any shape. I searched Phaser docs but didn't find hitArea property. Is it moved somewhere else or is there some new way how to make graphics object clickable and call certain function when a click event happens? Also how can I show cursor hand when rollover a clickable graphics object? I forgot to ask is there some official phaser example for this functionality? PS: I even searched DisplayObject class but didn't find hitArea there.

I was wondering are there any useful functions in Pixi.js which I can use in my Phaser 2.6 application to darken /brighten fill color of rectangles polygons etc...? For example make rgb(200, 150, 186) 10% darker. I might code a function like that in JS but should I? A tool that does the job but it works in NodeJS: https://www.npmjs.com/package/color

Hi, Any opinions of the most performant way to do a simple rectangle mask on a Group? Currently I'm using group.mask, it's ok, but I've read that masks are slow and they flush the webgl batch. The children of the Group will be animated, so need to keep this in mind. Would you think drawing the Group to a RenderTexture and calling renderXY every frame would be faster? Or drawing the Group to BitmapData? Actually I'm still unsure what the differences are between RenderTexture and BitmapData? You can draw DisplayObjects to them both, and they can both be used as a texture...? Any help appreciated. Cheers,

1. How can I draw closed polygon like the image above but without the diagonal black line that creates/finishes the polygon? 2. Or should I use Phaser.Polygon function at all? Is there some better solution? 3. Is it possible to create rectangle with mask smaller than the rectangle creating the image above? How would I apply border to this solution?

Hello, I want to change phaser Rectangle fill color with tween transition, for example from blue to red, but I didn't find any example, is this posible? thanks

Hi, I'm starting out with pixi.js, and really liking it so far! One thing that has really been puzzling me, however, is how to work with points and the scene graph. Let's say I have a problem like this, with two containers, and objects within those containers that essentially need to interact across the scene graph. In theory, the problem is trivial, however what I'm not quite sure of is the 'PIXI way' of doing this. For example, what's the best way to get some arbitrary point and convert its position to a global one? How about getting a DisplayObject's global position? And is there an easy way to transform a point from one local coordinate system to another? I've looked at the functions toLocal and toGlobal but they don't seem to be working as I'd expect them to. The documentation seems very thin and without usage examples I'm struggling to see how to use them properly. Also, where do WorldTransform and all of these matrix-related methods come into play? I was of the impression that an object's transform in space could be fully qualified with its point, parent, scale and rotation values so I'm having trouble seeing where these matrix operations step into the picture. On a related note, I'm having trouble working with objects like PIXI.Point and PIXI.Rectangle. For example, say I wanted to make a helper function that adds two points. My first thought would be to do something like function add(p1, p2) { return new PIXI.Point(p1.x + p2.x, p1.y + p2.y); } but that's clearly not right, since it's making a heap allocation every time the function is called! In fact, anywhere I find myself working with points, I keep wanting to treat them as value types, and I am not seeing a good way to use these structures conveniently, passing to and from functions, without making constant allocations. If I could see an example of PIXI code that works with points in one of these ways, I think it would be really helpful. Thanks! Daniel

I have a game in flash that uses vector rectangles with different colors and sizes. The rectangles have round corners and white outline stroke of 4 pixels. What is the best way to implement these rectangles in a Phaser game? I might have to use 6 different colors and 10 different sizes (both horizontal and vertical). Is there anything like 9-Slice-Scaling, that we have in Adobe Flash? In case I'm not clear in explaining the round rectangle, I'm talking about the shape you get by using this css style in html: div { width:300px; height:100px; background:#00CC00; border:3px solid #FFF; border-radius:20px; }

Hello all, I have two simple questions. First of all, is it possible to collide a Phaser.Sprite with a Phaser.Rectangle? If not, is it possible to collide two Phaser.Rectangles? Thanks in advance...

I have created a rectangle and attached it to a sprite. (I'm not sure if this is the right way to create a shape, tell me if it's not.) Now I want to change the color of this rectangle dynamically. I have looked into many color related methods with no success. How to do that? var sprite;var graphics;function create() { game.physics.startSystem(Phaser.Physics.ARCADE); graphics = game.add.graphics(0, 0); graphics.beginFill(0xFF700B, 1); graphics.drawRect(0, 0, 100, 100); sprite = game.add.sprite(0, 0); sprite.addChild(graphics);}function update() { if (game.input.activePointer.isDown) { //i want to change the color of the rectangle here }}

Hello everyone, I'm trying to make a rectangle clickable just like a sprite. I read here and there and the hitArea way should be the best for me since the rectangle have variable size, so I can't really use an invisible sprite. That's what my code looks like but it raises the error : "Uncaught TypeError: Cannot read property 'onInputUp' of undefined". So what would be the proper way to do this (I coulnd't find doc on hitArea) : unpauseButton = game.add.graphics(0, 0);unpauseButton.beginFill(0x81DEED, 1);unpauseButton.drawRect(SIZE_X * 0.55, SIZE_Y * 0.65, SIZE_X * 0.1, SIZE_Y * 0.06);unpauseButton.hitArea = new Phaser.Rectangle(SIZE_X * 0.55, SIZE_Y * 0.65, SIZE_X * 0.1, SIZE_Y * 0.06);unpauseButtonText = game.add.text(SIZE_X * 0.55, SIZE_Y * 0.65, quitButton2Text, {fontSize: '16px', fill : '#000'});unpauseButton.hitArea.inputEnabled = true;// Error here :unpauseButton.hitArea.events.onInputUp.add(function () {unpauseGame(game, gameBoard, showQuitMessage, unpauseButton, darkScreen, quitTitleSprite, quitMessageSprite)});Thanks!

Not if the following is an error. I'm learning this empirically Panda 2.0 game engine, I'm practicing what they learned. and at the moment I am working with graphics. So I'm developing a mini platform game for so implement everything learned. I do not have as sprites, then my hero will be a rectangle. The next thing is that in my class hero who I have called "Cat", I created the body of my hero, the rectangle will be red in the graphic class, adding a rectangle to this rectangle so add to the body of the hero , and finally adding it to the world as we will see in the code. game.createClass('Gato',{ init: function(x,y){ this.cuerpo = new game.Body(); this.cuerpo.collisionGroup = 1; this.cuerpo.collideAgainst = [0]; this.cuerpo.position.set(x,y); this.cuerpo.collide = this.colisiones.bind(this); //Class Graphics this.catGrap = new game.Graphics(); this.catGrap.anchorCenter(); this.catGrap.fillColor = '#f00'; this.catGrap.drawRect(this.cuerpo.position.x,this.cuerpo.position.y,50,50); this.catGrap.addTo(game.scene.stage); //Rectangle(50,50) var catShape = new game.Rectangle(this.catGrap.width, this.catGrap.height); //change this.cuerpo.addShape(catShape); this.cuerpo.addTo(game.scene.world); }, colisiones: function(colision){ if(colision.collisionGroup === 0){ this.cuerpo.velocity.y *= -.5; //Work } return true; }, update: function(){ this.catGrap.position.copy(this.cuerpo.position); } });The problem is this, the width and height of my body will be 50. and when I run the code, it is as follows. so that we can give a wide and long rectangle that resembles the hero, I have to double the value of the rectangle that will add to the body, or it has to value 100, and is as follows. var catShape = new game.Rectangle(100, 100); My question is, and look at the documentation, and I know, as equip the red rectangle is even with the box body. since it is not working properly. and as seen in the last image, the high is unbalanced. Thanks.

Hello all, I am having trouble with a problem that would seem very simple but I haven't been able to find an answer to in the forums and there is not a close example I've been able to find on the Phaser.io site. Explanation: I have a quiz game that asks questions like multiple choice. At the bottom of the game there is a row of circles with numbers inside to show how many questions. When the user answers a question, the circle changes color (red = incorrect, green = correct). Then the row slides to the left. Problem : I use a click event and in the callback function I change the graphics fillColor property ex : rectangle.graphicsData[0].fillColor = 0xFF0000; I put this in the update state, and every frame, the update state looks into an array objects that track the question, the answer chosen and whether or not it was correct. It looks something like this. var tracker = [{question : 1, // Question numberchosen : 'A', // Choice chosenstatus : 0 // 0 for wrong, 1 for right}]So the idea is, that update looks to the question number the game is currently on, subtracts that value by one (the previous question), looks into the array, finds the question number and uses the status to determine whether the circle with the same number should be red or green. rectangle.graphicsData[0].fillColor = tracker[this.quest].status ? 0x00FF00 : 0xFF0000; I use a console.log to check the fillColor Property and it's changed to the correct color, but on screen, the rectangle never changes color. Bandaid : The only way I can change the color of the circle is by refiring the create state and using the same logic to redraw the circles based on my tracker array. I have put together a little snippet to recreate, basically the same functionality (change color of graphic on a event) ;(function($){ $.fn.graphics = function(){ var self = this; var Graphics = {} var game = new Phaser.Game( $(self).width(), $(self).height(), Phaser.AUTO, $(self).attr('id') ); var Objects = { rec : null, color: 0xFF0000 } var state = function(game){} state.prototype = { init : function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; }, preload : function(){}, create : function(){ Objects.rec = game.add.graphics(0,0); Objects.rec.beginFill(0xFF0000, 1); Objects.rec.drawRect(50,50,50,50); Objects.rec.endFill(); Objects.rec.inputEnabled = true; Objects.rec.events.onInputUp.add(function(){ console.log('fire'); Objects.color = 0x00FF00; }); }, refresh : function(){ }, update : function(){ Objects.rec.graphicsData[0].fillColor = Objects.color; console.log(Objects.color); }, } game.state.add('state', state); game.state.start('state'); }})(jQuery);Sorry for all the tab spacing, this editor seems to magnify all my tabs. here's a screen of my console log that shows the property changes