Posts Tagged ‘html5’
-
Lands of Lorez – our 32×32 pixel dungeon crawler
1st Jun 20141The Low Rez Game Jam was a month long jam organised by Deviever, where the objective was simple – create a game that ran in 32×32 pixels only. You were allowed to upscale your game of course, but it had to be natively running in just 32×32 pixels in order to qualify. To put that into perspective you could fit 48 games of that size into the resolution of a ZX Spectrum.
Ilija and I decided early on to create a first-person perspective styled dungeon crawler. A homage to the old Westwood and SSI games like Eye of the Beholder and Dungeon Master. It wouldn’t be as advanced as any of those, but we hoped to still convey the same general feeling. Our game was called Lands of Lorez (puns on so many levels there) and here you can see it running in its native size:
and zoomed in to 256 x 256:
After a couple of nights work we had the basic ‘crawling’ routine in place. Naturally I coded the game using Phaser, but ended-up creating an entire Tilemap Walker plugin to handle the movement in a way that I needed for a game like this.
-
Flash to Phaser JSFL Script
28th May 2014What 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 1.0 and the journey we took to get there
16th Sep 2013After months of hard work everything came to a head on Friday September 13th when we released version 1.0 of Phaser, our HTML5 game framework. This was a monumental milestone release for us, and the fact that it has taken us 3 days to even write about it on our own site should give you some indication of the whirlwind that ensued following launch.
We punched the shiny ‘release’ button quite late on Friday, which not only pushed 1.0 to our github master branch but also unveiled the lovely new Phaser web site as well. Although just a single page site for now the design reflects everything that I want a game framework to be: fun, fast and easy to use. I wanted people to look at the site and instantly feel like it was approachable: not too ‘serious’ or dour, but by no means amateur either. The site certainly had the desired effect, as sure enough the tweets spread like wildfire and the site is getting thousands of visitors a day. As a result we’re seeing great levels of activity on our github repo and the Phaser section of the HTML5 Game Devs forum has exploded, with fresh new sign-ups and questions coming every hour.
-
Whattaheck: The HTML5 demoscene
11th Jul 2013Anyone who knows me knows about my love of all things linked to the Atari ST and Amiga demo scenes, going back multiple decades now. The site We Are Back has been actively converting lots of famous demo screens to html5. It’s great to see it has bought about the resurrection of some long since idle demo groups too. So here’s a very quick round-up of some of my favourite recent entries on the site:
D.O.C. Demo by SpeedStar
This is a legendary Amiga classic and very cleanly recreated.
Whattaheck by NewCore
This is one of the earlier Atari ST mega demos created by The Carebears (and friends). As was common with Atari ST demos you used the space bar to move from screen to screen rather than the mouse. On the main menu, as seen in the screen shot above, move to the DEMO NO. section and use the left/right arrows to change the screen and then space to load. There are 13 in total. NewCore has literally converted the entire demo, minus a few scroll texts, very impressive work indeed.
Hemoroids Rebirth by Hemoroids
This is different in that it’s an old Atari ST demo crew coming back from the grave and flexing their muscles with html5 instead. This is a brand new demo, made in a mostly old-skool style, but with new music, graphics and effects. Lovely to watch and even better in full-screen.
A La Melon by SoLo and TDK
Another new creation this time by SoLo and a bouncey chip track by TDK that’s a great tribute to the Amiga group Melon Design.
New demos get uploaded on an extremely regular basis and there is a very active Facebook group around WAB too. So if you have the desire to see some demoscene pixels blasted across your browser then I’d strongly recommend joining in.
-
Announcing Phaser (Flixel HTML5) and our Adobe Max session
12th Apr 2013We’ve two exciting bits of news to share today. First we have just released Phaser. Phaser is a light-weight 2D HTML5 game framework based heavily on Flixel. Indeed it started life called Flixel5 but was renamed to avoid any potential confusion 🙂 The current feature list is pretty comprehensive:
- Asset Loading
Easy loading for Images, Sprite Sheets, Texture Packer Data, JSON, Text Files and Audio Files. - Cameras
Multiple world cameras that can scale, rotate, flash, shake, alpha and track sprites around the game world. - Sprites
All sprites have physics properties including velocity, acceleration, bounce and drag and collision built-in. - Groups
Group sprites together for collision checks, visibility toggling and easy function iteration. - Animation
Sprites can be animated by a sprite sheet or Texture Atlas (JSON Array format supported). Animation playback controls, looping, fps based timer and custom frames. - Collision
A QuadTree based Sprite to Sprite, Sprite to Group or Group to Group collision system within world space. - Particles
An easy to use Emitter can emit sprites in a burst or at a constant rate, setting physics properties on them as it does so. - Input
Keyboard, Mouse and Touch support (advanced gestures coming soon) - Stage
Easily change properties about your game via the stage, such as background color, position and size. - World
The game world can be any size and collision and motion is tracked across the whole world. - Sound (partial support)
Currently uses WebAudio for playback. More work needs to be done in this area. - State Management
For larger games it’s useful to break your game down into States, i.e. MainMenu, Level1, GameOver. The state manager makes swapping states easy, but the use of a state is completely optional. - Cache
All loaded resources are stored in an easy to access cache, which can be cleared between State changes or persist through-out the whole game. - Tilemaps
Support for CSV and Tiled JSON format tile maps is implemented. - Random Number Generator
A seed based random number generator allows for reproducible in-game effects. - Game Scaling
Games can scale to fit any device and will scroll the URL/status bar away on Android and iOS mobile.
- Asset Loading
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