Phaser Category
-
Pixel Perfect scaling a Phaser game
1st Aug 201420
With GBJam3 just started today I tend to get asked this a lot on twitter: “How do I scale my game and keep it crisp?”
This is a perfectly valid question and is essential for games that rely on pixel art. And the answer is that there is no 100% fully cross-browser compatible solution. There are various CSS hacks and vendor prefixes you can try, but they won’t work on everything.
However, if that was my final answer there would be no point in this blog post, right? When we created our lowrez jam game, which was a game running at a 32×32 resolution, we came up with the following approach that works much more reliably than any CSS hack. Here’s how to get it working:
For this example I’ll assume you are making a GBJam game, so you’ve a restriction of 160 x 144 pixels. The same as the original Gameboy resolution. First create your Phaser game object:
var game = new Phaser.Game(160, 144, Phaser.CANVAS, '', { init: init, preload: preload, create: create, render: render });The important things to note here are:
- Use the un-scaled resolution
- Always use Phaser.CANVAS as the render method
- Give an empty string as the DOM parent (the 4th parameter)
Once the game object is created we use a new object to hold our scaled canvas:
var pixel = { scale: 4, canvas: null, context: null, width: 0, height: 0 } -
We’re hiring: Laravel4 and Web Audio API developers
15th Jul 2014
We’ve been working relentlessly on Phaser, but in order to help us reach some of our goals faster we need additional development support.As a result we’re looking for 2 experienced freelancers:
Laravel4 Developer
You’ll help the core team build the new Phaser web site. A large portion has been completed already. But we need a highly competent Laravel4 developer to help finish off key areas. You must have demonstrable and proven Laravel4 experience, and time to dedicate to working on this.
Tasks will include building the user management / registration system, integration with Stripe and help with some common admin areas. Ideally you’ll have a rock-solid grasp of CSS as well, as some tasks will require it.
Web Audio API Developer
The current version of Phaser offers a decent level of abstraction for adding audio to your HTML5 games. It handles both legacy audio and Web Audio, audio sprites and playback support. However this is an area we’d like to really focus on expanding and there are opportunities for many enhancements here.
From positional audio, to Web Audio filter effects to dynamic sound generation like sfxr. You’ll work closely with us to help craft a modern game specific audio API that works flawlessly on mobile, neatly slots into Phaser and adopts the style and conventions that make Phaser so popular. You will need to understand the Web Audio API inside and out – we’re not just talking someone who has perhaps completed an HTML5Rocks Tutorial here. Ideally you’ll have a game dev background and understand how best to hook the new audio API into the rest of Phaser.
This task would be suitable for “part time / evening” work if you’ve the right experience, as we’re not working to a fixed deadline for this feature (“it’s ready when it’s ready”)
Get in touch
Both positions are remote only and can start immediately.
We expect you to be self-motivated and professional in your conduct. We don’t have time to micro-manage you or be left wondering why you’ve “gone dark”. You must be available to discuss progress on a regular basis and will commit code into a shared repository.
For our part we’ll pay you promptly and fairly, just as we’ve done with many other freelancers over the years. We’ll respect your experience and listen to your suggestions. You will be considered a part of the team, not a “resource”. In return you’ll treat us professionally and treat our projects with the same care and attention you’d give your own.
No agencies. No exceptions.
If you’re interested in either role please contact rich@photonstorm.com including details of which role you’re applying for, how you can help us and your daily rate.
Applications for these positions expire July 25th 2014
-
A defiant and deadly Phaser 2.0.6 “Jornhill” is released
10th Jul 2014Phaser continues to evolve and grow stronger with every release, and 2.0.6 is no exception. We coordinated this release to land the exact same day as Pixi.js 1.6 came out. As you may know Pixi is the renderer that Phaser uses; its beating heart if you will. So when Mat and the Goodboy team drop a stack of new features into Pixi, everyone benefits.
And 1.6 is bursting with new goodies: from a vastly improved Graphics class, to rope, strips, faster WebGL and Canvas renderers, enhanced mask support and other tweaks across the whole API. Have a read on the Goodboy blog for full details and examples of what’s new.
But it’s not just Pixi that has changed. Phaser 2.0.6 has a huge number of enhancements too. From new BitmapData functions, to much improved Sprite.crop support. There are also lots of CocoonJS specific fixes, thanks to the work of our dedicated developers and direct help from Ludei. The Keyboard class has new callback support, Arcade Physics bodies can now be easily enabled via a simple boolean property, wrapping Tilemap Layers, Emitter updates, Group updates and not forgetting stacks of bug fixes.
As usual loads of these came in from the Phaser community, either directly via pull requests or from reported issues. We do our best to respond to all of these, so please do report bugs! Also we’ve just made our 2001 commit to the repository – how geekily cool is that? 🙂
-
Flash to Phaser JSFL Script
28th May 2014
What is it?
Flash to Phaser is a JSFL script that will aid in the process of laying out scenes within the Flash IDE and converting them into Phaser JavaScript files. It works by parsing the Stage for any Bitmap or Symbol objects and then automatically builds-up a JavaScript source file including preload and create functions that accurately re-create what is seen inside the Flash IDE.
If the script encounters a Symbol it treats it as a Phaser Group and uses the Symbol name as a Group name. Any Bitmaps within the Symbol are treated as Group children and positioned accordingly.
Objects have their x, y, rotation and scale properties re-created in the JavaScript.
Installation
Download the JSFL file from Github (you’ll also find this guide as a PDF there)
There are two ways to install JSFL scripts into the Flash IDE. One is to copy them into the Flash application data folder, specifically into the “Configuration/Commands” sub-folder. The location of this varies tremendously based on OS and Flash version. There is a slightly out dated guide available here on the Adobe site.
An easier method is to create the script manually, which is what I’ll describe here.
-
Phaser 2 and our plans for the future
29th Mar 2014
Exactly 6 months after the release of Phaser 1.0 we released version 2. It was a huge update. Not so much in terms of new features, although it did bring its fair share of tasty new treats to the table. But more so it underwent a large internal change. We upgraded to the latest version of Pixi.js, our renderer and this in turn allowed us to literally shave thousands of lines of code out.
The core update loops of all the game objects like Sprite and Button, were dramatically reduced. Lots of the things that caused Phaser 1.x to not be quite as optimal as it could be were eliminated. Expensive routines and processes were either removed entirely or disabled where possible.
It was a big update, but it felt good. It felt clean and fresh. Like when you tidy-up your work space, or white wash a room ready for painting. You know you’re building on top of something sound.
There were a number of API breaking changes moving from v1 to v2, which is why we jumped version number so high (originally it was just going to be the 1.2 release). It was a lot of simple but important alterations. Things like the Group class now properly extending a DisplayObjectContainer, so they can easily be nested and shifted around the display list. Or Sprites no longer having physics bodies by default, or input handlers, which meant the amount of code they process during their basic update is now utterly minimal. Those features are still available of course, you just have to activate them explicitly. The changes were so extensive we produced a Migration Guide to help developers shift over.
The TriForce
Traditionally Phaser has had the ArcadePhysics system built in. This was a port of the one found in Flixel and our Flixel Power Tools. It was fundamentally basic, but still covered quite a lot of bases and most importantly was very easy to use. However the limitations really started to bug us, and we tried to address them in the 1.1.4 release of Phaser, with less than stellar results.
A strong reason for us developing Phaser 2 was so that we could use a proper full-body physics system, in our case the excellent p2.js by Stefan Hedman. And for a good while this was the only physics system we had built in. But as we worked through the weeks of development, it became apparent that there was a real need to keep ArcadePhysics around. Not the broken 1.1.4 version, but the earlier release that mostly just worked, because it didn’t try to be too clever.
Hire Us
All about Photon Storm and our
HTML5 game development services
Recent Posts
OurGames
Filter our Content
- ActionScript3
- Art
- Cool Links
- Demoscene
- Flash Game Dev Tips
- Game Development
- Gaming
- Geek Shopping
- HTML5
- In the Media
- Phaser
- Phaser 3
- Projects
Brain Food
