| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



06.07.2022

MPI Component

Library untuk pengembangan multimedia interaktif dengan Flash/Animate

23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

3D Modeling on Froyo Taxi

Introduction

Back in 2006 at the earlier of my career as Flash Games Developer I was hired by big company, FreeOnlineGames.com. On my very first project i was asked to develop top view racing games. I got several idea about the top view racing games, but the project manager ask me to build the taxi simulation game. So I begin with the engine. The main different between Taxi Simulation game and other racing game is the track. Topdown racing game will move on the track that now too big, but as Taxi driver you have to drive your cab on the big area or on the city road. Using big bitmap on that day is very risky because the SWF performance will drop and the file size will be grow big. When i look at Tony pa's tilling game, its very lite to handle very big screen movement. So i adopt the tiling game idea and build the city and the Sim Taxi game was born 1 month after i learn the tiling game. When the game was released 4 month later, we got some surprised because the Sim Taxi game was very well recieved by the FOG gamers, and hit almost 5 millions only on the fist week, and hit 10 millions in a month. I am not sure about what thing that make this game so popular, because the game is quite boring actually.


Later on when my contract with fog was over, I got several over from other portal to develop the similar games, so I build some version of Sim Taxi like, Sim Taxi 2 for GameNinja.com, Sim Taxi Berlin, NY and Amsterdam (base on the real map) for GamesBook.com, Sim Taxi lotopolis city and many more. There are so many version of Sim Taxi, but all are using 2D games, some games look 3D but actually they using prerendered 3D images.


On 2012 after my Ace Trucker project, I want to develop "again" the Sim Taxi using Stage3D feature, so all the graphic will be in 3D. After 1 week try to develop the engine, i found that build Sim Taxi in 3D is more difficult than develop the 2d version. I have to control the car, traffic, passengger, pedestrians, big city, etc. That is alot of thing to do, and handling all the object in 3D is the main problem. At this post I will try to explain some tips using Flare3D to handle a lot of movement.

Btw why don't you try the final game called "Froyo Taxi"? after playing for a while, you'll get my point and you can read the rest of this post. Click the image bellow to play it froyo taxi

3D Modeling

I made all the models by my self, and it took around 2 weeks to build all the 3D models. The most difficult part is city modeling. On the 2D Sim Taxi, i simply draw the building then build the map using map maker (software that i use to build the map array for tiling games - made by me :) ), but on 3D i have to build the entire city on the 3D software. Problem with that is the size of the city, the number of poly/tris that i will use, the material/texture. I have to optimize the 3D model so the file size is not that big, the poly is not that high and the texture images are not over size. So i limit my 3D budget into 10K tris. Actually 10K tris is not that big for 3D games, but the thing is - this game is the browser games, if i use very high poly (20K or above) I'am afraid that the performance will drop. Take a look on my city model

lowpoly-city

Fist step that i took to build that city was build the road. There are some of good tutorial to build the road in 3D, one of them is using UVW maping with ID, I use simple 3D plane with several segments, then break the "poly face" base on the road type (straight, turn or junction) and set the ID base on the material ID. I use 1024x1024 px images as road texture, Apply it to the "plane that converted to editable poly", then I set the ID of each poly, ex : for a straight road i use 1 as ID, 2 for turn road, 3 for junction, 4 for grass tiled, 5 for red tiled etc. Take a look on this picture.

lowpoly-city

Next step is adding the building, this part is quite simple. I have at least 18 different buildings. Each building is using between 20 - 50 tris. Then i distribute the building manualy to build the entire city. In this case, i have to keep my eye to the budget - i can't use over 10K poly, so i will remove some building if the poly is hit 10K or above. lowpoly-building

Next model is the main character of the game, the Taxi it self. For the taxi my budget is 500 tris. My Tips (copy from other 3d artist tips) is using high quality texture images (with good contrast) to show the detail of the object. You can add the detail like stipes, tire rims, wiper etc using texture, so you'll keep your 3D as lowpoly as you can.

lowpoly-taxi

Next models are the traffic cars. For each car i use less budget comparing to the main taxi. One weakness of Flare3D in this case is LOD (Level of Detail). On some 3D engine, usually they have LOD management, mean the apps using 2 different models for a single object. It will show the high poly model when the object near with the camera, and show the lowpoly model when the object far away, this LOD system with help the processor to get better speed. Because Flare3D not yet powered with LOD system, we have to manage the other "unimportant" object become as lowpoly as we can (or you can develop your own LOD). So in this game i have 6 type of public cars, all is 1000 only tris.

lowpoly-cars

Last models are the pedestrian. In Sim Taxi 1, the pedestrian is static, mean they are not moving around. But in Sim Taxi 2 (lotopolis, NY, Berlin etc), the pedestrian are move around, and sometime they stop and waiting for taxi. Moving around mean animation, so I have to animate the model. To do this i made the low poly character using around 200 polys and rigg it using biped. By using biped we can simply move the bones and make the good animation-in this game i made walking animation (around 36 frames)

lowpoly-chars

So all the 3D models are done, my next step is export all the model into F3D format. Good thing is the file size of all models is 5.15 MB. My next step is the build the code for the games, and i will explain it on the next post about Froyo Taxi Coding. Thanks.