Converting a Unity3D project to PlayCanvas - Part 4

  • How do 2D layers work in PlayCanvas?
  • How to setup the render order for the sprites for this level?
  • How to create the column obstacles?
  • How to make them scroll with the level?
  • How to setup collisions with the columns?

This is the fourth part in the tutorial series on how to convert a Unity3D project to PlayCanvas. If you haven't red the previous parts, I would suggest to do it now. You can study the first part here.

This tutorial assumes a minimal knowledge in using the PlayCanvas editor, plus the things you learned on the previous parts!

Unity 3D Flappy Birder Style Example Game

 

How do 2D layers work in PlayCanvas?

They don't! :) Right now the new 2D api in PlayCanvas doesn't provide an exclusive way to set the render order of the sprites, like in Unity. The rendering order is assumed from the entity hierarchy, from top to bottom. This means that your sprites will be rendered one after the other, the way you have them ordered in your hierarchy.

PlayCanvas entity hierarchyThis sounds convenient and it is for ordering local hierarchies, but in our case, using the 2D api to create the whole of our level calls for creative thinking. We will come in a while on this.

For now, check how we ordered our sky and ground sprites. The sky comes first and then the ground. So, the PlayCanvas renderer will render the Sky sprite, then the ground sprite, and this will give the "illusion" that the ground is in front of the sky.

This procedure of ordering the elements in the rendering queue is usually called z-ordering, as z is commonly the depth axis.

What is z-ordering?

Z-order is an ordering of overlapping two-dimensional objects, such as windows in a stacking window manager, shapes in a vector graphics editor, or objects in a 3D application. One of the features of a typical GUI is that windows may overlap, so that one window hides part or all of another. When two windows overlap, their Z-order determines which one appears on top of the other.

 

How to setup the render order for the sprites for this level?

Before we move on, we need to re-arrange our entities in the hierarchy to take into account the ordering of the current elements and the ones that we are going to add.

Expand your Scenery entity and select the first of the two Holder entities. Now hit the duplicate button and rename the new entity created to HolderGround. Expand it and remove the SkyTileSprite. Select the first Holder entity and rename it to HolderSky, expand it and remove the Ground entity.

Repeat this procedure for the second Holder entity. If everything was done right now 4 HolderSomething entities will appear in your hierarchy.  Arrange the order they appear, by moving the HolderSky entities first, and the HolderGround second. Check the image attached.

PlayCanvas entity hierarchy

The reason we split the entities is that we want to add additional entities to be rendered in between. We will use the sorting order of the sprites inside the Scenery entity to set the rendering order.

 

How to create the column obstacles?

In a similar manner as we created the Sky and Ground entities we will add the Columns. We aren't going to follow the Unity sizes/properties again, but try to visually recreate them.

1. Create a holder entity for the two opposite columns

Inside the Scenery entity add a new Element Group entity named HolderColumns, and attach a Script component. Add the following scripts:

  1. p2Body.js
  2. p2Box.js
  3. scrollingObject.js

For the physics scripts we will setup the settings later.

2. Create a column entity to hold the collision scripts for a column

Insert a child Element Group entity in the HolderColumns entity, and attach the same three scripts again. Name the entity Column.

3. Create a Model entity to hold the sprite of a column

Insert a child Image Element entity in the Column entity. Drag and drop the ColumnSprite.png on the Texture property of the Element component.

Name the entity Model.

Here is the update hierarchy under the Scenery entity now:

PlayCanvas entity hierarchy

 

How to make them scroll with the level?

Already done! Just by adding the physics scripts on an entity plus the scrollingObject.js script the entity will scroll together with the level.

Move the HolderColumns entity ahead of the bird, just to see it rise a bit above the ground.

PlayCanvas Editor

 

How to setup collisions with the columns?

Now this is the hard part. In Unity physical shapes are visualised inside the editor, even physics work while editing. Pixel perfect collisions are available for 2D sprites ... to make a long story short: it is 2D heaven.

PlayCanvas will catch up, the team is already working to push some cool new 2D features (animated sprites are coming!) but for the moment we are going to tweak the physics through trial and error.

Actually I did that, so you are getting the final working values to set.

1. Physics settings for the HolderColumns entity

Select the HolderColumns entity and reflect the settings on the physics script per the image attached:

PlayCanvas script properties

Notice the Sensor property that we checked. This means that this entity will not produce contacts (= you aren't going to bounch/hit on this collision shape) but will only report collisions on our event listener. Why are we doing that? To monitor when the bird passes through the columns and score points.

2. Physics settings for the Column entity

Select the Column entity and reflect the settings on the physics script per the image attached:

PlayCanvas script properties

Now, one final step is to create the second column. Duplicate the Column entity. Set the position Y of the first Column entity to 635 and the for the second to -635. This will create a nice gap between them for the flappy bird to pass through.

Select the first Column entity, expand, select the Model entity and set the rotation Z to 180. This will flip the top column upside down.

We are ready! Launch the game and enjoy a nice column for you to try your skills.

As a bonus you will enjoy full collisions without game over while smashing on the column.

PlayCanvas launch
https://playcanv.as/index/2VewMIrz/

To prepare for the coming tutorial, let's insert the columns on our collision detection script. Open the bird.js script and change the method on line 21 that listens for collision inside the physics world.

appRoot.script.p2World.world.on("beginContact",function(evt){


    if( evt.bodyA.entity.tags.has('column-point') || evt.bodyB.entity.tags.has('column-point') ){
        console.log('scored point!');
    }

    if( evt.bodyA.entity.name === 'HolderGround' || evt.bodyB.entity.name === 'HolderGround' ){
        console.log('Touch down!');
    }

}, this);

PlayCanvas entity nameSelect the HolderColumns entity and add the column-point tag.

Now if you debug with the browser's inspector you will get feedback on your passing through the column.

PlayCanvas debug

 

You can score but you can't lose!

An amazing game. In the next tutorial we will learn how to clone and insert additional columns to make really for an infinite game.

As usual you can find the public project for this tutorial here.

If you like these tutorials help us write more by supporting us below, on our Patreon page.

Converting a Unity3D project to PlayCanvas - Part 3