Tuesday, May 4, 2021

Induction Program - Scratch


Lecture 1 - Introduction to Scratch

Lecture 1 - User Interaction

Lecture 2 - Sound

Lecture 3 - Game Development 1

Lecture 4 - Game Development 2

Lecture 5 - Game Development 3

Friday, December 13, 2019

Web Page Design Workshop

Lecturer: Ms. Lim Sin Chee
Lab Assistant: Mr. Koong Kok Leong
Date: 13 Dec 2019
Venue: Lab 10


A first glance of the web page creation process. You will be able to explain how a web page is designed and displayed in a browser. This workshop contains a simple web animation making as well as interactive web page.

Template Download

Tuesday, August 13, 2019

Maze Game Development with Scratch


First City University College
Maze Game with Scratch


Topic: Maze Game Development with Scratch
Date: 28th August 2019 (Wednesday)Venue: Engineering Lab 7
Time: 1400 - 1600
Handout for Scratch
Source for Game Development

Tuesday, June 18, 2019

Scratch Workshop

First City University College



Topic: Animated Name Card
Venue: Lab 10
Time: 1330 - 1530

Topic: Animated Greeting Card
Venue: Lab 10
Time: 1400 - 1600



Happy Birthday Song PDF Guide Book

Wednesday, December 12, 2018

Academic Poster 2018

A1 Poster: https://drive.google.com/file/d/1OizzTm0fxBVQ_22NNkBvDMQXY40NOrQn/view?usp=sharing
A2 Poster: https://drive.google.com/file/d/1l3L_nFFEKPt88NAA78OngiIP6crjjtJS/view?usp=sharing

Friday, June 8, 2018

Blender 3D Game Development (Workshop for First City University College)

Blender 3D is an open source software for 3D animation as well as game development tool.

With a group of people contribute to the software, it give a chance of everyone who wanted to learn 3D animation or 3D game development.

In this workshop, I am going to demonstrate the power of Blender 3D of creating simple game without using coding skill. This game consists of two levels and player is going to locate the portal to next level of the game.

Organization Unit: First City University College
Faculty: Faculty of Engineering and Computing
Title: Blender 3D Game Development Workshop
Date: 10 June 2018
Duration: 8 hours


Agenda:
0930 - 1200 Workshop
1200 - 1300 Lunch Break
1300 - 1500 Game Development Competition

Guide Book for Download

Wednesday, June 21, 2017

Simple Avoidance Game with Flash CS6 (Workshop for Firstcity University College)

Simple Avoidance Game with Flash CS6 


This is a tutorial that will show you how to create a simple avoidance game using ActionScipt version 3 in Adobe Flash CS6.  The following is the screen captured for the appearance of this game. There are only two characters in the game. Enemy will drop from the sky and the cute little jelly man is going to avoid the enemy. One mark will be granted if jelly man successfully avoid being hit by the enemy drop from the sky. In addition, any successful avoidance will increase the dropping speed of the enemy which create some difficulty to the game and enhance the playability of the game.


At the beginning of the game, we need to plan and organize the game. First of all, we need to define the goal of the game. The restriction of the game. The condition that will end the game. The highest mark will be granted to those who can avoid the enemy at the longest time.

Goal of the game: The jelly man has to avoid being hit by enemy as long as possible.
Restriction of the game: The jell man can move left or right (controlled by left and right keys beside the number pad). The enemy will randomly drop from  the sky.
Condition Ending the game: If the jelly man is hit by the enemy the game end.

Then, design the background scene. Normally I will place ground at one layer, tree at one layer, sky at one layer, cloud at one layer, characters at one layer, mark at one layer and finally a layer for script.

We will create all necessary for the scene accordingly. Let's start with creating movieclips in Flash.

Creating Movie Clip

In the step, we need to create characters in the game (enemy and jelly man), NPCs (trees, ground, cloud and sky). We need to convert this image to movieclip in Flash and store in the Library so we can used them later in the game scene.

Let use the Flash drawing tool to create the tree look similar to the following:

Create a jelly man and enemy look similar to the following:



Create your cloud, sky and ground respectively at your own creativity.

Make characters and NPCs available in the scene

Place the characters and NPC to the respective layer as shown as the following:


Drag one enemy to the stage. Give a name to this character so that the script can interact with it. In this case, named it enemy.

Drag one enemy to the stage. Give a name to this character so that the script can interact with it. In this case, named it hero.

Create a text box at the right upper corner and named it mark. Change the text to dynamic as it can be updated by the script.

Create the script section for the game

Select the script layer, press F9 to enter script editing window. Copy and paste the following code into the window.

stage.addEventListener(KeyboardEvent.KEY_DOWN, pressedButton);
stage.addEventListener(Event.ENTER_FRAME, onEnter);

var score:Number = 0;
var enemy_speed:Number = 5;
var size:Number = 60;
var step:Number = 6;

function init():void{
enemy.x = size/2;
hero.x = size/2;

}
init();

function randomRange(minNum:Number, maxNum:Number):Number{
return (Math.floor(Math.random()*(maxNum-minNum))+minNum);
}

function onEnter(e:Event){

enemy.y = enemy.y + enemy_speed;

if(enemy.y > stage.stageHeight){
enemy.y = -size;
var num:Number = randomRange(0,step+1);
enemy.x = num*size+size/2;

score = score + 1;
mark.text = String(score);

if (stage.frameRate <= 60){
stage.frameRate = stage.frameRate + 5;
}else{
stage.frameRate = 60;

if(enemy_speed <= 25){
enemy_speed +=1;
}else{

enemy_speed += 25;
}
}

}

if(hero.hitTestObject(enemy)){
stage.removeEventListener(KeyboardEvent.KEY_DOWN, pressedButton);
stage.removeEventListener(Event.ENTER_FRAME, onEnter);
stage.frameRate = 24;
}

}

function pressedButton(event:KeyboardEvent) : void
{
if(event.keyCode == Keyboard.LEFT && hero.x >= size){
hero.x = hero.x - size;
}else if (event.keyCode == Keyboard.RIGHT && hero.x <= step*size-size){
hero.x = hero.x + size;
}
}

Play the game by pressing CTRL+ENTER.

The executable version of game is available in the link: https://www.dropbox.com/s/7i921ttldsab4dn/SimpleAvoidanceGame.swf?dl=0