MMNMTCO

Interactive Applications for Computer Media

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Objectives
● Kumustahan
● The PlayCanvas interface
● Basic controls
● Importing assets
● Lighting and skybox
● World units
● Activity 1

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Join our Discord channel

https://discord.gg/ekUceR6H6q

Please change your channel name to

your real first and last name.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Kumustahan!
● How are you this week?
● Any questions about our topic?

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface

ASSETS

Where all game

assets are uploaded
and organized.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface

ASSETS

Where all game

assets are uploaded STORE
and organized.
A quick source of
third-party assets.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface
VIEWPORT

Shows the current

scene being
rendered. In-scene
assets are called
entities.

ASSETS

Where all game

assets are uploaded STORE
and organized.
A quick source of
third-party assets.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface
VIEWPORT
HIERARCHY Shows the current
scene being
A list view of all the rendered. In-scene
entities in the scene. assets are called
entities.

ASSETS

Where all game

assets are uploaded STORE
and organized.
A quick source of
third-party assets.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface
VIEWPORT
HIERARCHY Shows the current
scene being
A list view of all the rendered. In-scene
entities in the scene. assets are called
entities.

INSPECTOR

Allows you to view

and adjust the
properties of an
ASSETS asset or entity

Where all game

assets are uploaded STORE
and organized
A quick source of
third-party assets

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface
LAUNCH
Click this button to
run your game in
the browser

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface
LAUNCH
Click this button to
run your game in
the browser

MAXIMIZE

Toggle the visibility

of the side panels

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 The PlayCanvas Interface
LAUNCH
CAMERA
Click this button to
Access preset run your game in
camera angles, the browser
toggle physics
object visibility

MAXIMIZE

Toggle the visibility

of the side panels

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Controls

Left Button + move Right Button + move Middle Button + move Middle Button wheel

Rotate camera around Swing camera around Pan camera without Zoom in and out.
the currently focused like in a first rotating it.
object. person-style view.

WASD keys Q key E key

Move camera forward, Move camera down Move camera up

back, left, right

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Controls

Translate

Rotate

Scale You can always refer to the controls

panel (the button is on the lower left) if
you forget any of the standard
hotkeys.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Importing assets
You can add assets by importing them
from the PlayCanvas store, or by
uploading them.

● Visit the store by clicking on the store

button in the editor. Select a destination
project for your asset of choice and it will
be imported into that project.

● To import your own assets, drag them into

the assets panel from File Explorer. You can
also click on the + button beside assets and
choose Upload…

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Using textures and materials

Materials are assets can be applied to These textures are images that must
3D entities to add texture to them. be applied to the material assets.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Lighting

Directional light Point light Spot light

Light that shines in one direction.
Everything in the scene is lit from this
direction.
Position does not matter, only rotation.
Light that shines in all directions.
In a reversal of the directional light,
rotation does not matter, only position.
Light that shines in one direction, from a
specific point, at a specific radius. This is
similar to how a flashlight would work.
For this light, both position and rotation
matter.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Skybox

A skybox is composed
of six images mapped
onto a cube map.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Skybox
After assigning the cubemap to the skybox under
Rendering (Settings > Rendering), the skybox will be
visible in the scene.

As you can see, higher resolution images work better!

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Skybox
You can download many premade skybox images at:

http://www.humus.name/index.php?page=Textures

You can also search for "skybox cubemap" online for

more options. You'll just need to edit the images to
separate each face.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 World units
Each square in PlayCanvas is
considered a 1x1 meter square.

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.

 Activity 1
● Create a 3D environment that you will use
for your midterm FPS project
● Add lights and a skybox
● Experiment with props (tables, walls,
plants, etc)
● Take note of the 1GB storage limit
● Submission: submit the link to your
project from the dashboard (click on the
home icon if you're in the editor)

Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.