• Content Count

  • Joined

  • Last visited

Everything posted by RichardSneyd

  1. We are seeking a very experienced Phaser 3 developer, who is familiar and comfortable working with the framework in typescript, in a full-time capacity. Must be familiar with source control, most specifically git. It is also essential that the candidate be familiar with NPM, and experienced in modular javascript. The ideal applicant will:* Have a portfolio of phaser projects to share, demonstrating good code design.* Have a good work ethic.* Be capable of working to deadlines* Be a team player.* Have good knowledge of design principles and patterns* Be ready to contribute to brainstorming and troubleshooting sessions* Be an excellent communicator* Be available for a minimum of 30 hrs per week, preferably 40 hrs.This project will entail the devopment of 2 gamified learning products, each of which will contain many seperate activities. Therefore, an 'engine' of sorts is being developed, which functions as a layer that sits on top of phaser, and under the products (will be published as an NPM package so that it can be shared and updated in a modular fashion), and wraps all the common functionality and types (super classes, mixins etc..) which both products will utilise, implement, extend etc. The right candidate will be expected to assists in the further development and maintenance of this engine as well as the two products which utilise it -- hence, the applicant should also have strong interpersonal and collaborative skills. This calls for a good understanding of OOP design concepts and principles, especially inheritence vs composition; an ability to determine when it is appropriate to abstract something into a seperate class, and when it is not.Please include references to at least 3 portfolio piecs, as well as a a brief explanation of how you would instinctively approach the design of the code base for these two learning products, and the underlying 'engine'. Use this as an apportunity to demonstrate your 'Architecture' skills -- convey a sensible structure; this will help us to see how you will fit into the devleopment team, and what you can contribute to the various stages of the process. If interested, please respond on this thread, and submit your proposal to Thanks and Regards, Richard Sneyd Head of Software Development Highwood Education
  2. Hi, This is my first time posting here, though I've been using Phaser for a while now and love it. I'm currently working with Phaser CE version 2.10.3, and I'm getting inconsistent results with masking. My artist has created GUI elements, like load bars etc, with very rounded edges. For that reason, when I scale the 'inner' graphic to create the usual load bar effect, I must mask around the curved edges of the 'outer' graphic or what I end up with is a squashed graphic at the edge when the scale is very low, say at 0.1. I've managed to successfully mask the load bar you see when you visit the following page: I used this code to achieve the result: this.loadBarMask =, this.loadSprite.bottom, 'loading_bar_mask'); this.loadBarMask.x -= this.loadBarMask.width/2; this.loadBarMask.anchor.setTo(0, 0); this.loadBarMask.scale.setTo(0, 1); this.loadBarGlass =, this.loadSprite.bottom, 'loading_bar_glass'); this.loadBarGlass.anchor.setTo(0, 0); var mask =, 0); mask.x = this.loadBarGlass.left; mask.y =; mask.beginFill(0xffffff); mask.drawRoundedRect(0, 0, this.loadBarGlass.width, this.loadBarGlass.height, 45); this.loadBarMask.mask = mask; However, when I use the same approach to mask the 'FuelGuage' graphic at the bottom right of the game, you will see, if you wait for it to load for a moment, that this is not working, and it looks rather ugly (all squashed up at the bottom, because the mask isn't having any effect). This the code that I am using for the FuelGuage, which is pretty much identical in it's approach: this.fuelMask =, -(yOffset+30), 'fuel_mask', 0, this.origin.HUDgroup); this.fuelMask.anchor.setTo(0.5, 1); // this.addChild(this.fuelMask); this.fuelJar =, -yOffset, 'fuel_jar', 0, this.origin.HUDgroup); this.fuelJar.anchor.setTo(0.5, 1); // this.addChild(this.fuelJar); this.fuelJar.centerX = this.centerX; this.fuelJar.bottom = this.bottom - 85; this.fuelMask.centerX = this.centerX; this.fuelMask.bottom = this.bottom - 100; this.fuelMask.scale.setTo(1, 0.05); var mask =, 0); mask.x = this.fuelJar.left; mask.y =; mask.beginFill(0xffffff); mask.drawRoundedRect(0 , 0, this.fuelJar.width, this.fuelJar.height, 130); mask.endFill(); this.fuelMask.mask = mask; If anyone can see any possible issues with the way I'm approaching this, or has any tips on how I might debug the problem, I'd really appreciate it. I've tried using the genereateTexture() function to visualize where the graphic for the mask is appearing, but have been unable to resolve the problem thus far. Many thanks, Richard