This minisite is still work in progress, and is powered by React & Babel.

Pebbl

Where nothing is as it seems, unlike everything else...

There is a small and rather lazy ‘Progress Bean’ lost in a strange world.
This world has windows, doors, one sky, and a multitude of floors ...

What is a Progress Bean to do?
What the heck is a Progress Bean?

About

Pebbl is a bit difficult to describe, and that is kind of the point.

The whole aim of the game is to be something that players will pick up and enjoy from time to time, when they have a spare moment. Akin to a web comic or crossword. Although it would be a cross-comic-web-word formed out of many interwoven puzzles, silly plot and even sillier characters (yes that is the correct spelling of sillier, however the pronunciation might have been a bit off).

The game itself started out as my first foray into the world of Canvas programming, and has continued to be a brilliant platform for me to learn new abilities.

Assets

As with my other projects, it is the design and generation of the assets that takes the longest — compared to the writing of code. This is the reason for keeping Pebbl very simplistic in its style, it is also the first personal project where I have made use of stock sites — just to speed up my progress.

Technologies

I am now on my fourth attempt at creating an engine to power this strange game. And despite the amount of time ploughed into something, that does not yet exist in the eyes of the interweb, Pebbl has single handedly helped me learn a cornucopia of different techniques and technologies.

In trying to construct this original canvas-based experiment, back when canvas was new, and for some reason slower to clear than to draw on??! I wandered through the realms of Canvas 2D Context, Canvas 3D Context, a hybrid mix of Canvas and DOM, then SVG, Pixi.js, Paper.js, Three.js, EaselJS, Phaser, Unity 3D, Unity 2D and then back again to a hybrid of Canvas and SVG.

Without this personal project I wouldn’t know half the things I know, in terms of JavaScript and Front-end Graphical capabilities.

Logo Phaser
Logo Pixi Js Logo Underscore
Logo Polyk Logo Theory

Theory & Async

Pebbl is also the first of my systems to employ the latest version of my JavaScript library called Theory. I’ve been working on this library for years, and parts of it have been used in nearly every project I’ve worked on.

These days, many of the things the library does have better known equivalents, so obviously for client work, I use those instead. But there are still somethings that no other library does yet — hence the reason I still continue to develop it.

async() is similar to RequireJS but was developed using promises.

Polycade

Game Engine

Pebbl's Engine v0.4 is almost ready for release!

The code now on pebbl.co.uk is a revamped game engine powered by my bespoke library called Polycade.js. This is a wrapper library that utilises other shoulders-of-giants like Phaser, Pixi js, PolyK and not to forget underscore, to produce a game environment that can handle each of my requirements:

Irregular Shape Collisions

I’ve attempted many ways to achieve irregular shape collision handling in a game engine. There are a number of shortcuts that can be used, one of my first engines employed pixel colour analysis, another using a full-blown 2D physics engine.

These days most game engines do offer shape collision handling, but most do it using a 2D physics engine (just like Phaser). This is fine for many types of games, but I’ve given up attempting to get it working well with a platformer. This is because whilst it makes a lot of collision handling easier to deal with, it makes everything else much more difficult to control. It also tends to introduce a particular “floaty” style to the movement of the characters, which doesn’t look good for platformers.

So in Polycade, I’ve specifically implemented a handling that employs a similar polygon handling to that of a 2D physics engine, and employs ray-casting against those polygons, but allows old-school pixel movement of characters.

Generated and skinable landscapes

Another useful string to Polycade’s bow is the ability to auto-generate 2D landscapes using a skin theme. Most of the credit for this ability goes to Pixi JS and its rope handling, however, polycade wraps this up specifically for use in landscape generation.

You can read more [ here ]

Destructible landscapes

Going one step further than polygon landscapes, and generated landscapes, is to allow those landscapes to be modified in real-time. This ability is still a work in progress, but essentially (using the power of PolyK) the polygons used in the landscape’s form can be modified by subtracting other polygons from them.