Workshop[22nd august][assignments]

PREPARED AND PRESENTED BY
Dr.Saajid Abuluaih, PhD
22nd of August 2021
J I S T & A R C H E P R E S E N T S
Web−Based Second−Life
School Management System
Workshop
Team: "Fantastic−Team”, Project: "GatherRound”
[ A s s i g n m e n t s ]

© 2021 arche1.co.jp | jaist.ac.jp
All rights reserved.
P A G E 2
The Project Workflow
Reorganizing the teams
And the teamwork

P A G E 3
Teams Organizational Structure
Te a m s M a n a g e m e n t s
We have two distinct teams:
1. Logic development team: their responsibility includes (Game Physics, Game Controls, and Game AI).
2. Artistic development team: their responsibility includes (UI Design, Level Design, and Character Design).
I’ll be the project manager and the team-leader for both teams. The tasks will be assigned directly by me
The team members are:
• Logic Development Team:
• Papa: Game mechanics, camera controls, and an AI/physics assistant
• Nazhif: Artificial Intelligence
• Saggu: Physics and overall performance rating
• Artistic Development Team:
• Gucy: Level Designer and Quality Assurance
• Neha: Level Designer & Animator and special effects specialists
• Liu: 2D/UI Designer

P A G E 4
• Task Management Platform: ClickUP
• Assigning tasks is going through the platform
• Extension for your VSCode: Todo Tree
• This extension will help you find the place where
you are supposed to write your code.
• Art Development style: Voxel
• It is much easier than low-poly design style
Changes on Working
Environment
Check out this LINK, LINK, and this LINK

P A G E 5
• That tasks will be arranged and assigned by me (Saajid Akram).
• We MUST conduct a weekly meeting to report the progress (other than the class meeting).
• Do NOT push your code to the repo without check it with me first.
• IF YOU CANNOT COMMIT TO COMPLETE YOUR TASKS, WITHDRAWAL FROM THE PROGRAM
To Ensure Developing
The Solution Progressively

P A G E 6
Progress Report
What have we done so far

P A G E 7
The project structure
R e a r r a i g n i n g t h e p r o j e c t ’ s f i l e
I have reconstructed the project and divided it into five major parts:
• Core: this is the division that devoted to host all the objects that are necessary to kickoff
the app and perform the major operations to start the engine, it consist of two files:
• App.ts: everything to start the app is in this file, that includes initializing almost all
major components.
• AppConfig.ts: this object contains the major settings needed to configure the app.
• Scenes: this division is devoted to hold all information on the scenes of the app. It
consists of:
• Scene object: this object contains all the information about the current scene
• ScenesDB: this object contains a database of all scenes that can be loaded
throughout the app.
• Players: this division is devoted to store all information related to the players spawned in
the current scene.
• Controllers: this division is devoted to host the logic of the . So far, we have only one
controller which is Keyboard.
• Assets Managers: this division is devoted to load the assets of the game depending on
the chosen scene.

P A G E 8
App.js
The Core of the App
Client file is still the starter (the first file that will be requested and works as an entry point).
However, all what it does is that it calls a function (START) of object app
App object is devoted to host the environment variables, the scenes and players lists, and to manage clocks.
• This object contains the GAME LOOP which is the function tick(). The function contains time calculating section which calculates:
• _elapsed: the time in ticks (millisecond) since the app started
• _delta: the differensial time between current frame and the previous one
• The function tick() calls function update() which itself calls all updating functions from the moving objects.
• In the object constructor, we initialize all THREE js main objects, we initialize all timing variables, and we load the current scene (out of all the scenes the App
has) and the players in that scene as well.

P A G E 9
Player.js
Making the Player Model
This class defines the player avatar (looks and attributes). For now, this object consists of two main functions besides the constructor, and they are:
action() : [Private] which moves the avatar geometry
Update(): which calculate the current speed and direction and call action function to move the avatar.

P A G E 10
Player.js
action() : [Private] which moves the avatar geometry. It moves the avatar to all directions using the calculated speed.

P A G E 11
Player.js
Update() : it calculates the current speed & direction and if certain key were pressed on keyboard; it calls action function to move the avatar.
Can you guess why are we using Math.sin() here to
determine the direction?
Can you guess why (unlike to jump action) we need to
register the last action of pressing on “C” key?

P A G E 12
Player.js
Update() : it calculates the current speed & direction and if certain key were pressed on keyboard; it calls action function to move the avatar.
This is the fun part :D .. The speed is determined here and
then passed to action() if the key was pressed
Can you think of a way to improve the performance here?

P A G E 13
Player.js
We define the status of a player within their constructors. The basic states are: Idle, Crouching, Walking, Running, and jumping

P A G E 14
Player.js
Creating the geometry model of the player: in the constructer we call a function to create a specific character for the characters Database. So far we have only
one character.
In CharacterDB object we call create character function and send how big the model is and the texture path
Have you noticed that the texture has two characters not one!

P A G E 15
KeyboardController.js
Adding the Movement Control
This class is responsible for registering the pressed / released

P A G E 16
Scene.js
Building the Environment
The scene object can store the information about the current level. One environment can hold several scenes.
This object needs to be enhanced …

P A G E 17
First task!
Explore the project files, get yourself familiar with the functions, and let me know if you have any question.

P A G E 18
Team Members’
Tasks
First of all, install the following extension
Restart your VSCode. You should see this in your
side menu:

P A G E 19
Papa
C a m e r a c o n t r o l a n d G a m e M e c h a n i c
• Do a quick research on third person camera vs first person view vs fixed camera,
take into the consideration the following:
• In one paragraph, compare the three types against each other.
• In one paragraph, list down the characteristics of third person camera
• In one paragraph, list down the things that must be avoid when you develop third
person camera.
• The current task: Develop functionality of third person camera, taking into
consideration the following features (refer to the images):
• Smooth camera movement (not snappy)
• The camera should not go below the ground level or behind the walls
• The camera is a bit shifted to the right (the main character is not centered)
• Change the game mechanics and introduce the mouse movement to the project. When
the mouse moves to the left; the main character turns anticlockwise, and vice versa.
• Bugs: investigate the current bug in when the character jumps and fix it
Check out the following resources:
• Tips and Tricks for a Robust Third-Person Camera System
• 50 Game Camera Mistakes
• Resident Evil - 1st Person vs 3rd Person vs Fixed Cameras - Which is Better?
• Implement A Third-Person Camera just like Mario Odyssey In Unity

P A G E 20
Nazhif
A r t i f i c i a l I n t e l l i g e n c e
• Do a quick research “fear and aggression behavior”:
• In one paragraph, define and differentiate between fear and aggression behavior.
• In one paragraph, list down the characteristics of fear behavior
• In one paragraph, list down the characteristics of aggression behavior
• The current task: Develop a functional NCP agent that always looks toward the main character (start with a cat):
• If the main player gets closer to the agent (the safe distance got violated); fear behavior kicks-off the agent does the following:
• Turns around to the other direction.
• Runs away to maintain the safe distance (same forward direction movement, opposite side direction movement).
• If the agent gets cornered; aggressive behaviors kicks-off:
• The agent turns toward the player and takes a defensive position.
• If the player gets any closer, the agent attacks the player … the player loses points.
Check out the following resource:
• Experiments in synthetic psychology

P A G E 21
Saggu
P h y s i c s a n d M a t h e m a t i c s p r o b l e m s o l v i n g s p e c i a l i s t
• Do a quick research on “Collegian Detection”:
• In one paragraph, Pythagorean Theorem and how can be used in collegian detection
• In one paragraph, define collegian detection and list down its uses.
• In one paragraph, list down the categories of collegian detection
• In one paragraph, list down the characteristics of an efficient collegian detector
• The current task: let the scene contains “Special Areas” that have cylindrical shape, develop collegian
detection taking into consideration the following criteria:
• Raise flag “ObjectTouch” if the player bounding box touches the special area (See figure 1)
• Raise flag “ObjectIn” if ALL player bounding box is the special area (See figure 2)
Figure 1
Figure 2

P A G E 22
Gucy
L e v e l D e s i g n
• Do a quick research on “Game Level-Design”:
• In one paragraph, What is Game level-design
• In one paragraph, What is Voxel Art
• In one paragraph, How to construct an enjoyable level (what is the characteristic of an interesting level)
• In one paragraph, list down the constraints that need to be taken in to account when designing a level
• The current task: Complete the School using voxel art style and add to it its texture.
• The design feature that need to be considered is as follows:
• The school is two stories
• Follow the Voxel style (refer to the pictures)
• Put all the textures that you will use in only one file
• Lights is Gucy responsibility
• A Beginner's Guide to Designing Video Game Levels
Check out these voxel City 3D models:
• Voxel City
• Japan Voxel
• Voxel City - Voxel art

P A G E 23
Neha
L e v e l D e s i g n a n d A n i m a t o r
• Do a quick research on “Game Level-Design”:
• In one paragraph, what is game level-design.
• In one paragraph, what is voxel art.
• In one paragraph, animation in game design.
• In one paragraph, special effects and particle system in game design.
• The current task:
• Design streets blocks as square assets and texture them (see the images)
• Design Luigi and NCP (cat/kitten)
• Add visual effect: motion blur when the main character is jumping (refer to this example)
• Design skybox (refer to this example)
• A Beginner's Guide to Designing Video Game Levels
Check out these voxel City 3D models:
• Voxel Road Sections & Signs (69 Items)

P A G E 24
Liu
U I S p e c i a l i s t
• Do a quick research on “UI/UX design in games”:
• In one paragraph, what is UI/UX design for 3D games.
• In one paragraph, what is the characteristics of a good UI for a game.
• The current task: Develop a 2D compass that always points to the north at the bottom right of the
screen
• Display the name of the player and their next task at the top left corner of the screen
• Show the random message of places name “Door, Window, sidewalk” when the
“ObjectTouch” flag is raised [Consult with Saggu]
• Show the message “Hit F for action” when the “ObjectIn” flag is raised [Consult with Saggu]
• Enable Debugging mode

P A G E 25
T H A N K S F O R Y O U R
AT T E N T O N

Workshop[22nd august][assignments]

Recommended

Recommended

More Related Content

Similar to Workshop[22nd august][assignments]

Similar to Workshop[22nd august][assignments] (20)

More from Saajid Akram

More from Saajid Akram (7)

Recently uploaded

Recently uploaded (20)

Workshop[22nd august][assignments]