Jump to content

Search the Community

Showing results for tags 'rectangle'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. 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.
  2. 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?
  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?
  4. 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 co
  5. 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
  6. 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
  7. 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.
  8. I want to set the bounding box of text. Thanks!
  9. 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
  10. 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?
  11. 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? ) :-)
  12. 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 c
  13. 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(
  14. 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.
  15. 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
  16. 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
  17. 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?
  18. 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
  19. 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
  20. 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:#0
  21. 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...
  22. 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) { /
  23. 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);unpau
  24. 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('Ga
  25. 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 graph
  • Create New...