• Content Count

  • Joined

  • Last visited

About RichardSneyd

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Highwood Educational Consulting and Development is Seeking a junior JavaScript/TypeScript developer for a period of approximately 4 to 5 months, to commence mid to late July 2020. Must have experience developing interactive products with HTML5 canvas – experience with a popular framework such as PhaserJS or PixiJS would be an advantage. Experience testing on multiple devices, including all major desktop and mobile operating systems (Windows, Mac, iOS, Android etc) is required. An understanding of Dependency Injection would also be advantageous, but not absolutely essential. The suitable candidate will have a portfolio of related work to demonstrate knowledge and expertise. The possibility exists of further work for the right candidate. To apply, please email CV, cover letter and/or portfolio link to: Many thanks! Richard Sneyd Head of Software Development Highwood Education
  2. 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
  3. 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