ARTWORLD – movement

We want to let the user be both able to move their Avatar with both the keyboard or by clicking with the mouse or by touch on a screen.

Combining these modes of input proofs to be a bit tricky. Not in the least because moving by clicking proofs the be tricky in itself. Phaser has automatic camera following that can interfere, or tilemap bounds.


A few basic things are important:
1. do we get a consistent world coordinate on click
2. does the player move to that location

physics.moveto example:

scroll camera example:


World Camera example:

* onscreen debug/ control menu
* move, zoom camera
* list of events
* config parameters for the camera (acceleration, drag, maxSpeed)

Get world point rrom camera:

Move And Stop At Position:

Virtual Joystick

Swipe discussion

Swipe example

Resize the screen code snipplet:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var playerX = canvas.width / 2;
var playerY = canvas.height / 2;

$(window).on("resize", function () {
    $("#login,#game,#canvas").width( $(this).width());
    $("#login,#game,#canvas").height( $(this).height());
    playerX = canvas.width / 2;
    playerY = canvas.height / 2;


ARTWORLD – art styles background


ARTWORLD – resize canvas

We want the game to be an ’empty’ canvas. The shape or size is not predefined.

So when resizing the window (when possible), the window should show more of the world, leaving all the elements where they where.

Phaser has a scale manager build in that handles different preferences

This one is suitable for our case:

There is also this examples, but it leaves scroll bars in the window:

When resizing some elements have to updated:
* the camera bounds
* the background bounds
* elements that are scaled or positioned relative to the window width and height

We try to give everything an absolute position.

If the player wants a more scaled up view, we provide zoom in and out buttons for that.

Here is camera zoom control example:

In the main menu, zooming the camera out, does not update the background. So I would have to use the ScaleManager here.

In the main game the background is set to very large, maybe there this technique does work…

Zooming with the ScaleManager does nothing…

Article about rescaling scenes:


Technical Paper for ARTWORLD

As mentioned in the previous post we are developing a 3D game for children to make and exhibit art in.

The client tells us their idea, dream, vision and frame. We translate it into an achievable plan. Time was quite short on this project: 6 months to develop a 3D game with quite a lot of features, especially concerning the storage and management of art works. There is also a lot of interactivity that has to be coded.

The achieve the goal we make design choices early on that will help us achieve the vision with out slowing us down.

We set a clear Minimal Viable Product with the client and a first deadline to meet the MVP. We build in time to refine the MVP after the first deadline.

The first technical decision we made was to use web technologies for the game. Web technologies came a long way in the years and have some clear advantages:

  • the code can be run on phones, tables, laptops, PC’s with ease. We expect the children to use many different devices.
  • the backend code and the front end code can be developed in Javascript

For the look and feel of the game we don’t want to go for a full 3D look. It adds a lot of complexity to the code, view rendering and also use of the game.

Less of this…

And more of this…

Sometimes flat is better. Objects can’t be obstructed by each other as much. It add less complexity to the development, and the code is lighter on the device running it.

Our game plan is as follows:


Starting work on ARTWORLD

For the foundation De Vrolijkheid we were asked to develop a online game in which children can make and exhibit art.

We will make a game with art-making tools

In the 3D game world children can explore art works and make their own.

We are very excited to have been granted the opportunity to work on this project. We have worked with De Vrolijkheid before on a videomapping for a small museum project.

We will start work on this project soon. We will keep a blog with progress on the project.

For this project we will use the game framework, with the Nakama game server.