Search the Community

Showing results for tags 'phaser 2.6.1'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 21 results

  1. Animate water ripple?

    I need to make a water ripple effect in Phaser with Phaser animation. Yes I will create spritesheet but how to achieve it without doing too much? I can draw with Inkscape? Is there some filter or tool I can use to draw this in inkscape? Or should I just redraw thin ellipses on update event?
  2. Hello. I managed to create code that draws a button along with a textfield and also with the four states that a button have, onInputUp, onInputDown, onInputOver and onInputOut. However, it is still experimental, and since I add text object as a child of Phaser.Graphics, the text is a bit blurry. But the bigger issue is, new graphical elements are added without removal, so I have a bug somewhere, or it is just not possbile to create dynamically drawn button with text and all states and to add custom click event handler. I will post another topic for the code itself, but here i just want to ask if there is a plugin for Phaser that draws buttons dynamically, or buttons on which I can change the text dynamically? Or how can I create button and be able to change its text dynamically? Should I just place Graphics object below and on top a text field both pointing to the same click listener?
  3. Help with Matrix algorithm

    I need some help to optimize algorithm. I have a matrix of sprites and I am highlighting a part of it. It can be rectangle or square it doesn't matter. I need to hide all sprites of this matrix that do not belong to the given area. I have this function which is highly non-optimized i.e 4 nested "for" cycles: hideMatrixArea: function(slotTwoDimArray, row, col, numRows, numCols) { var i = 0, j = 0, k = 0, t = 0, matrixWidth = slotTwoDimArray.length, matrixHeigth = slotTwoDimArray[0].length; for (i = 0; i < matrixWidth; i += 1, k += 1) { for (j = 0; j < matrixHeigth; j += 1, t += 1) { for (k = row; k < row + numRows; k += 1) { for (t = col; t < col + numCols; t += 1) { if (!(k === i && t === j)) { console.log("hello"); this.hideSlot(slotTwoDimArray, i, j); } } } } } return slotTwoDimArray; }, It prints "hello" 15600 times which is a lot. How can I hide slots that are not in the space (row, col) -> (row + numRows, col + numCols) i.e the inverse without using nested "for" loops? Any ideas?
  4. Sprite transformation matrix?

    I have this utility function: var geoObjContainsPt = function (geoObj, x, y) { return geoObj.getBounds().contains(x, y); } When I use it with sprite type of object it does not work in all cases. Maybe the bug is elsewhere but as I checked the docs, Phaser.Sprite.getBounds() wants Sprite's transformation matrix. I guess that is coordinate transformation matrix. Not sure. But how can I get it? Some connection with worldTransform. What is that? Or should I use getLocalBounds()? Note: On the contrary Phaser.Graphics.getBounds() does not need a parameter. http://phaser.io/docs/2.6.2/Phaser.Sprite.html#getBounds http://phaser.io/docs/2.6.2/Phaser.Graphics.html#getBounds Only certain sprites get tinted with green. Some sort of a pattern haha
  5. Is it possible to use Phaser's QuadTree without enabling the physics system? I don't really need Physics I just want to check if mouse is over a specific tile of a large matrix. I have a matrix of sprites and it can grow or shrink. Roughly it can have from 70 up to 1500 tiles. I can use nested "for" cycle to visit each sprite tile and check if mouse cursor is over it but this check happens mostly each update cycle which means 60 frames per second times 1500 checks, that is 90000 checks in the worst case every single second. Quad Tree uses adjacency tiles to find if mouse is over a specific one. It is more optimized.
  6. This example seems promising: http://phaser.io/examples/v2/input/pointer-over But I need to add additional code for each of my graphics object to detect which object is currently below the mouse pointer. Also It would be tricky if the graphics object is a composite of several other graphics sub-objects. How can I print in console the name of a graphical object which is below the mouse pointer at any given time? Some examples? Note: Can I use Phaser.Pointer.hitTest() function and how? Thanks
  7. I just found there is a function called sort(key, order) inside game.world inherited from Phaser.Group. I have a list of objects of type Phaser.Graphics inside my parent also of type Phaser.Graphics. The parent object is a wall and the children are shelves. I need to fake a 3D effect that the shelves sit on top of each other as the "y" coordinate increases. I can do this by setting the child index to descending order i.e from larger to smaller, but I need first to sort my shelves by "y" coordinate in ascending order. (The shelves which have the smallest "y" coord. have the highest z-index i.e sit on top of the other). Could I use this Phaser.Group.sort(key order) function for children of Phaser.Graphics or not? Or maybe there is a another way to sort graphical objects?
  8. getChildByName() in Phaser ?

    I was wondering is there some function in Phaser that will return child of a graphics object by its name? I don't see one. But I see getChildAt() or getChildIndex().
  9. Add drag event dynamically?

    I was wondering if there are some examples of adding onDragStart and onDragStop events dynamically once a condition is met? The picture shows the asked functionality: I press "The Horizontal baffle" button, and by doing that, a horizontal handle is added on screen following the mouse cursor. Currently the handle is moved directly with (x, y) coordinates on update, so no drag events included. I should be able to start dragging my handle and when I stop drag or release the handle it should add new shelve. Currently I am checking gameObject.input.mousePointer.isDown state and add shelve when mouse is released. But this is just not enough. Are there some examples of this complete functionality. I am just tired of hacking and trying non-sense solutions
  10. I was wondering is there a Phaser visual subtype on which I can manipulate its alpha/transparency without redrawing it? Phaser.Graphics is ok but I need to redraw it and currently I am lost in my own code I have the graphics already drawn, it would be a lot easier to just change its alpha value. Sprite/Image does not seem to have alpha value. Is there some plug-in or perhaps some known hack?
  11. How does drawing graphics works?

    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?
  12. 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?
  13. I am kind of lost in this events system. I have a button which when i press it creates new graphics object. I want to be able to drag this object while the mouse button is down and when I release it this object should be destroyed. Tried several things but I am lost in sending context objects. How this functionality should be done correctly? ( I remember in Flash was easy, just use startDrag() and the newly created object start to follow the mouse as you move it) Here is my sample code which works partially: var horizontalBaffleBtn = null, horzBaffle = null; horizontalBaffleBtn = gameObject.add.button(10, 10, frnConstr.ImageAssetKeys.HORIZONTAL_BAFFLE); horizontalBaffleBtn .events .onInputDown .add(function () { this.frnPart = this .grUtils .drawRect(this.context, gameObject.input.x, gameObject.input.y, 50, thickness, constGr.DEFAULT_GRAPHICS_BORDER_SIZE, constGr.Colors.BLACK, 1, utils.getHexColor(shelveCssColor), 1); this.frnPart.inputEnabled = true; this.frnPart.input.enableDrag(false); this.frnPart.input.start(0, true); }, {context: grContext, grUtils: this, frnPart: horzBaffle}); console.log(horzBaffle);// prints null horizontalBaffleBtn.events.onInputUp.add(function () { this.destroy(); // breaks here, horzBaffle is null }, horzBaffle);
  14. Call input events explicitly?

    I have this color picker component which I created on my own. The structure of it is as follows: colorPicker is container graphics object which holds one color swatch graphics object(in this case the dark blue) and a button graphics object which has input handler. When i press the button, 13 other color swatch objects are added to colorPicker graphics object. Also when I press the arrow button again it destroys the below color swatch objects. However, it would be good if I can issue a command to remove other color swatches from outside of the colorPicker object, maybe when I press on the other area of the stage. How can I call existing event in graphics object from outside world? Is there some utility function in Phaser, like call() or?
  15. I have utility functions and lot of them are just drawing to game.add.graphics object. Some of them have rather complex behavior, like calculating some values to see if something should be drawn or not. The problem is these function can accept large number of different values so I should be testing them. An example function: drawShelve: function (dataObject) { var halfHeight = this.roundNumber((dataObject.frameHeight / 2), frnConst.BETTER_PRECISION), halfRearHeight = this.roundNumber((dataObject.rearHeight / 2), frnConst.BETTER_PRECISION), grObject = null, shelve = { graphicsObj: dataObject.graphicsObj, borderSize: constGr.DEFAULT_GRAPHICS_BORDER_SIZE, borderColor: dataObject.borderColor, borderAlpha: 1, areaColor: dataObject.areaColor, frontColor: dataObject.frontColor, thickness: dataObject.thickness, polygon: { pt1: {x: 0, y: 0}, cp1: {x: 0, y: 0}, pt2: {x: 0, y: 0}, pt3: {x: 0, y: 0}, cp2: {x: 0, y: 0}, pt4: {x: 0, y: 0}, pt5: {x: 0, y: 0} } }; // draw top corner shelves if (dataObject.shiftY >= this.roundNumber(dataObject.y + dataObject.halfCupboardDepth, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY < this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve = {/* some code */}; grObject = this.drawShelveWithArea(shelve); // draw rectangle instead of full shelve when exact half is hit with a Y coordinate } else if (dataObject.shiftY === this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { grObject = /* draw rect code here */; // draw bottom corner shelves } else if (dataObject.shiftY > this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY <= this.roundNumber(dataObject.y + halfHeight + halfRearHeight, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve.polygon = {/* some code here */}; grObject = this.drawShelveWithArea(shelve); } return grObject; } As you can see, there is if block and then two else-if blocks. All conditions are calculated and I must test if the shelve is drawn or not for different values, i.e not null. I set QUnit and added game object where can i draw with HEADLESS mode, but from the following picture I still see canvas added to my test page. How can i test without adding game object at all? Is it possible to utilize functions like: shelveWithArea.beginFill(dataObject.areaColor, 1); shelveWithArea.moveTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.bezierCurveTo(polygon.pt3.x, polygon.pt3.y, polygon.cp2.x, polygon.cp2.y, polygon.pt4.x, polygon.pt4.y); shelveWithArea.lineTo(polygon.pt5.x, polygon.pt5.y); shelveWithArea.lineTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.endFill(); Without a need of Phaser.Game object?
  16. 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.
  17. Fill areas drawn by bezier curves?

    I am using this code: var sp = new phaser.Point(frmX, frmY + halfCupboardDepth + thickness), mp = new phaser.Point(frmX, frmY), ep = new phaser.Point(leftWallShiftX, frmY); frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1); ep = new phaser.Point(frmX, frmX, frmY + halfCupboardDepth + thickness * 2); mp = new phaser.Point(frmX, frmY + thickness); ep = new phaser.Point(leftWallShiftX, frmY + thickness); frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1); where: drawBezierCurve() is: drawBezierCurve: function (graphics, sp, mp, ep, borderWidth, borderColor, borderAlpha) { graphics.lineStyle(borderWidth, borderColor, borderAlpha); graphics.moveTo(sp.x, sp.y); graphics.bezierCurveTo(sp.x, sp.y, mp.x, mp.y, ep.x, ep.y); } An it is drawing this drawing: Yes the green areas were drawn by other code but the above code draws just curved lines. I would like to fill the area between those two curves and the area below the second curve in-between the green area and the second curve. How can I do that? Should I draw first rectangle and then call bezierCurveTo() to make it curved. Well tried with polygon but it didn't do the trick. What do i miss?
  18. I checked this topic here: http://www.html5gamedevs.com/topic/3242-unit-testing-a-phaser-application/#comment-21011 It doesn't seem there are some updates. I have html form with data and I would like to test reset function i.e it restores default values for the form input elements. I am using jQuery and QUnit, both related to each other. But the problem is, this form has some dependencies which are inside my main JS object holding the game object which renders to canvas. I can include my main JS object but I don't want it rendering visual output. I tried using HEADLESS mode but it still shows visual output as if there is a bug. I will check again for Phaser 2.6.1 in a plain game set-up to see if it has really a bug. But the main question is, are there some tutorials or libraries adapted for testing Phaser game including html forms or other html elements?
  19. How does bezier curve drawing works?

    I was wondering how does bezier cureve drawing works. I know there is function bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY) → {PIXI.Graphics} and probably (cpX, cpY) is the start point, (cpX2, cpY2) is the middle control point and (toX, toY) is the ending point. but I got something like: Which is the polygon I drew just before the bezierCurveTo() call. Should I create first polygon and add fill/border to it or what do I do? Are there some official Phaser examples for drawing bezier curves?
  20. Draw closed polygon with border

    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?