• Content Count

  • Joined

  • Last visited

Everything posted by seejay92

  1. Still seems to be a problem now with the latest version of Phaser, any solutions guys?
  2. Hi all, Whilst creating a game for a client, I came across a bug with responsive CSS iFrames, where the frame wouldn't obey the CSS applied, and expand past the parent ONLY on iOS devices, so I created a demo to try to find the cause (see iframe example at bottom). Looking at the forums, it appears there has been a few unanswered posts on the topic, so I thought I would give it an attempt myself. I got nowhere! ...But after doing some surfing on iOS iframes, I found a semi-related article at: which raised a separate issue with scrolling. Following one of their solutions, to use an <object> instead of <iframe>, this seems to have fixed the issue on iOS. I've got limited devices to test this on just now, but it appears to work on my pc browsers, mac, iPhone and 2 androids. Apart from sharing my solution, I was just wondering what your thoughts were on the issue. Is this a problem that lies with the iFrame code on iOS, or is this something that Phaser could change to handle? I've raised a github issue just incase. Does the solution seem to work on your devices, and is there any downsides to an <object> over an <iframe>? Cheers as always! -- Examples -- iframe example: object example:
  3. I've noticed the exact same thing - Phaser on iOS seems to ignore the iframe CSS bounding even when window constraints are set to "layout" and expands out way past the mark it should. It's working fine on PC, Mac and android. Im using the SHOW_ALL scale mode, attempting to find a solution by using the USER_SCALE mode instead. Anyone else come across this issue?
  4. Would just like to update you all on a potential solution to this, I will need to give it some further testing but it seems to be working well on desktop and iOS. The solution is to use the Phaser.USER_SCALE scale mode instead. By calling the custom resize callback, you can multiply the game width and height by the extra pixel factor, and then scale down back down inversely using the custom user scale - this allows you to make the most of devices with higher pixel ratios, and keeps assets crisp whilst responsive. One downside, however, is that these devices could suffer from slight lag due to the increased game dimension - i've not suffered this yet, but in any case i've added a multiplier which you can adjust to find the right balance between quality and speed. (apologies for the code - I'm using typescript) // Located within boot statecreate() {this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; = true; = true; = "layout"; = "visual";,this);, this);}resizeCallback(manager){var userRatio = 1;if (>1){userRatio = * 1;//If you are finding you game is lagging on high density displays then change the value to a low number (0.75 for example)}if(manager.width !== window.innerWidth*userRatio || manager.height !== window.innerHeight*userRatio){manager.setGameSize(window.innerWidth*userRatio,window.innerHeight*userRatio);manager.setUserScale(1/userRatio, 1/userRatio);}}onSizeChange(){;//Calls the resize method in current state (make sure each state has this)}Let me know if this solution helps and works for you, or any improvements you can suggest! Thanks!
  5. Hi guys, I'm having a slight problem getting my head round using the Phaser.RESIZE scale mode with devices which have a higher pixel ratio than 1. The game resizes fine, but on modern iOS and android devices, the game loses its 'crispness', and objects become blurry, particularly smaller text. I know this is down to higher pixel densities of these devices, but I've not managed to find a solution for the canvas to utilise these extra pixels, as resize mode seems to be bound to the physical document dimension (I'm creating a responsive game which will fill the device/webpage window on either orientation, so sadly the SHOW_ALL approach won't work). Just wondering if anyone had uncovered any solution, or had any advice, as there doesn't seem to have been any conclusion on other similar posts. Thanks as always!
  6. Hi all, Just a quick post to start a discussion on flexgrids. I know they are still in testing, but its been hard to find any resources or examples of these in use. As I'm planning a responsive game, just wondered if anyone had any success or experience to share of these in action? Thanks! SeeJay
  7. Hey all, I'm working on a small prototype project where players can upload their own images to feature in my game as a sprite. I would really love for these images to be used as an animation of the sprite, but looking over the docs it looks like the animation manager and frame data only take to do with frames that are part of a singular image. Normally I would use a texture atlas or spritesheet to easily create animation, however to save players from the tedious job of having to create their own, I am looking for a solution for individual images I have a few ideas in mind in how to do this:- 1) Preload each image singularly, then make a new bitmapdata object during init, where the images would be lined up and used to adda new standard spritesheet to cache 2) Call the sprite.setTexture function every x milliseconds to update the texture 3) Merge the images into a spritesheet/atlas before they are loaded into phaser. Just wondering if you thought any of these may work best or had any better ideas/solutions? Thanks as always! Cameron
  8. I encountered this problem before, I found the easiest way was to create a group, and add the text as a child of the group, and perform any tweens on the group.
  9. Hello again - I solved this one this morning with trial and error. From my limited knowledge - A bitmapdata object is made from PIXI.BaseTexture object, which can be (or is) a HTML canvas element. This means you can write:- var data = this.bmd.baseTexture.sourcevar test = data.toDataURL();and then save this test variable, which is a string, to localStorage. Once done, you could reload the game (assuming browser localStorage support) with:- if(localStorage && localStorage.getItem("saveImage")){ this.load.image('savedImage', localStorage.getItem("saveImage")); = true; console.log("Found saved Image"); }Allowing people to carry on with their drawing at a later date. I'm still fairly new to the coding scene, so code may not be optimized to the best of its ability, but hopefully this will help anyone with similar question or problem!
  10. Hi guys, I'm trying to save a Phaser.BitmapData object to the localstorage as part of a small painting app demo i am carrying out. I know it's possible to convert the entire game.canvas to a data URL via: game.canvas.toDataURL();and save this string to localstorage, but is anything similar available for saving individual objects of BitmapData? - I've tried investigating the various properties of BitmapData, (imageData looked the most promising) to no avail, but I think (hope!) I'm just missing something fairly obvious. Many thanks! Cameron
  11. Hi Guys, I've written a small game to act as a banner on my website, however on mobile, where screen space is quite limited, its impossible to scroll the game if you begin the scroll on the canvas element. Does Phaser capture the touch/scroll events, and is it possible to disable them so to let the screen be scrolled? Many thanks! Cameron
  12. Hi guys, I have had the same problem as you with this issue, since upgrading to 2.2.2. After alot of headbanging (as I needed to keep the parent container too) I've finally found the change needed to make it work. On your boot state, add the following line so the game knows to use the bottom of your screen as a contraint:- game.scale.windowConstraints.bottom = "visual";Hope this helps! Cameron
  13. Hi guys, I have had the same problem as you with this issue, since upgrading to 2.2.2. After alot of headbanging (as I needed to keep the parent container too) I've finally found the change needed to make it work. On your boot state, add the following line so the game knows to use the bottom of your screen as a contraint:- game.scale.windowConstraints.bottom = "visual";Hope this helps! Cameron
  14. Hi everyone, Just a quick question for those with experience using P2. I'm creating a simple 2D sidescrolling golf game (using Typescript) and I've set up a polygon array creating random terrain Y points and a ball with P2 physics. The collisions between both using the contact material work perfectly, including Restitution and Surface Velocity but I was wondering if there was anyway to create drag when the ball rolls over the terrain. Just now, if there is even a slight hint of angle to a hill the ball will continue to roll down it due to gravity without any drag to slow it, or even if its flat it will continue at a steady pace. I've tried changing the contact material's friction to extremely high but this doesn't seem to have much affect slowing the velocity. Here's the settings for my contact material: this.contactMaterial.friction = 1e7; this.contactMaterial.restitution = 0.4; this.contactMaterial.surfaceVelocity = 0; // contactMaterial.stiffness = 1e7; // contactMaterial.relaxation = 3; // contactMaterial.frictionStiffness = 1e7; // this.contactMaterial.frictionRelaxation = 0.1; The temporary fix would be to call an event for when the two materials are touching which slows the ball's velocity to closer to 0, but I'm sure theres something easier I'm just missing as this is my first time using P2. Also as a little extra, could someone explain what the commented out properties of the material do? I know roughly what stiffness and relaxation do with Springs but I'm not too sure what affect they have in contact materials - they are probably the properties I need properly set to achieve my drag! Thanks as ever guys! SeeJay
  15. Cheers Rich, I'll try manually first but may need to wait for master Thanks for your quick fix!
  16. Hi Rich, Nice to speak to you! Yeah it seems alpha masks are still in but have just lost their 3rd and 4th arguments between the last phaser release, which allowed you to use a rectangle to define the size and co-ords of your mask - Although I may just be missing something, I'm pretty much a newbie to javascript. For my game I'm using resized images as the masks which used the rectangles to make the change, but I know the update added the ability to use sprites as masks, maybe there's a way of just using sprites instead. This is the definition files for the releases i have, c and d from what I recall was the references to the rectangles - /* Phaser v2.1.1 - - @photonstorm - © 2014 Photon Storm Ltd. */ alphaMask: function (a, { return this.draw(.blendSourceAtop().draw(a).blendReset() /* Phaser v2.0.7 - - @photonstorm - © 2014 Photon Storm Ltd. */ alphaMask: function (a, b, c, d) { ("undefined" == typeof b || null === && (b = this); var e = this.context.globalCompositeOperation; "undefined" == typeof d || null === d ? this.draw( : this.draw(b, d.x, d.y, d.width, d.height), this.context.globalCompositeOperation = "source-atop", "undefined" == typeof c || null === c ? this.draw(a) : this.draw(a, c.x, c.y, c.width, c.height), this.context.globalCompositeOperation = e, this.update(), this.dirty = !0 }, Thanks so much for your help, it's greatly appreciated! Cameron
  17. Hi guys, First time poster and novice with Phaser - Just a quick question about the bitmapdata alpha masks in 2.1.1... I've been using 2.0.7 for the last few months and loved the update to Bitmapdata via Pixi 1.6.0, allowing you to use a sourceRect and maskRect to define the size/location of your alpha masks and bmd I've just updated to 2.1.1 this morning and the option for these two arguments for alphaMasks appears to have been removed again according to the definitions file. I've not noticed anything in the changelogs since 2.1.0 to suggest what has happened - is there any work around to define these arguments again, or am I just being stupid and missing the obvious? Many thanks! Cameron