MMORPG Day 9

On Day 9 of MMORPG development I turned the player into a grey box and allowed him to walk around. To do that I had to implement collision detection, which is easy to do for tile based maps.

The walking was handled by four methods in the Character class: walkUp, walkDown, walkLeft, walkRight. When a method was called (probably by a key press), it checked if the player would collide with the tile the player was about to walk on and then accordingly moved the player. The collision system looks something like this:


Each tile had four edges, each of which could be walk-through or not. To move the player the walk-methods had to check if the corresponding wall on the current tile was walk-trough and if the corresponding wall on the next tile was walk-through. If this was not the case, the player was not moved. In the above case the player (black dot) wants to move left. The tile the player is on allows that but the tile the player is going to move too doesn't so the player isn't allowed move.

I had to make an additional collision map for my current test map. The collision map stores the collision values of all four walls of each tile in the map. It was a simple arrays of 0's and 1's, where a 1 stands for collision and 0 stands for walk-through.

Each time the player moved his height he had too be properly adjusted so that if he moved to a higher tile, he doesn't sink into the floor and if he moved to a lower tile, he doesn't float above it. This was also handled by the four walk methods. The methods simply found the average of the tiles Vertices and used that as the players height. This has some disadvantages on very very steep tiles but I'm not planing to let the player walk on top of tiles with more than a 45 degrees slope.

It's kind of great to be able to walk around the small test world and I'm happy because the MMORPG is now a big step closer to being finished.

MMORPG Day 8

On Day 8 I totally restructured the Map class (object). I found my current Map class was going nowhere and I saw no way out. I had one of those "Java Revelations" where you suddenly think of a way a lot easier and elegant than the one you're currently using. I shrank the code for the Map by half and now it's a lot easier to alter and more open to different options.

What I basically did was to substitute arrays and loops for things I was doing in a totally different way. I'm pretty surprised that I hadn't thought about this stuff before but I probably didn't think it was necessary. I now have an array of tiles in my Map class. Each tile holds all the variables about itself and almost nothing gets stored in the Map class itself except very general things. A Tiles variables include: Walkability (collision of all four sides), Colour(s), Object (ex. thing on top), Heights (all four corners), Actions (some script of a scripting language I haven't created yet triggered by character moving near/on tile).

I thought of a way to determine an objects/characters height when on a Tile. I would simply take the four sides of a Tile and find the average (height1+height2+height3+height4/4). The Characters height would have to be altered accordingly when moving. I hope to interpolate between nearby tiles when the character is not standing on any to find the next best height.

Nothing else really happened on day 8 which is kind of disappointing but I hope twice as much is going to happen on day 9 as I kind of pre-worked.

MMORPG Day 7

Day 7 improved the look of the MMORPG a lot. Here's how the MMORPG looked after day 7:


It was very easy to add colour to the height field I had already created. I simply created a text file similar to the height field file and put colours inside instead of heights. The colours where given as rgb (red green blue) as that was the only option I would even consider. There was one simple problem I had to face:


The height field had a number for each Vertex (those red dots) so the colour file had stored a colour for each vertex too. I could probably have Interpolated Colours between the vertices to create the gradient colours inside the squares but that would have slowed down the Applet a lot so I simply assigned the colour of a squares bottom-right vertex to the entire square. This way the first row of vertices from the left and top simply got ignored but if I ever change my mind to interpolating colours I won't have to change any files.

I plan to approach the adding of objects on top of the tiles the same way. I'll simply create another file for the same map and store objects numbers instead of Colours or heights. I hope it works. I'll see if it works tomorrow (hopefully).

MMORPG Day 6

Merry Christmas Again!

The MMORPG became interactive on day 6 of it's development. I made it possible to move around the map and change the camera angle.

To move around the map I either had to move the Map itself or the Character and the Camera. I decided to move only the Map since it was harder to move the Camera and the Character. Every time the character "moves" a tile, the map gets translated by the TileSize to make it look like the character moved.

The camera angle can be moved freely which isn't so great yet. I'm going to have to find some proper camera restrictions so that the player can't rotate the map 180 degrees and look below it.

The MMORPG of day 6 can be found Here. You can move around by using the arrow keys. You can change the camera angle by holding down the control key and pressing an arrow key. Unfortunately you have to press the arrow key each time you want to change the camera angle by 0.5. I'm probably going to change that.

To finish the Map I need to be able to load Objects and add them on top of the height map. Then I need to be able to display everything in color, not in grey tones. Then I need to put the character class into the map at the proper height. Then I'm finished with a lot of the MMORPG and I will be happy.

MMORPG Day 5

I got a lot done on Day 5. I started working on a Height Map loader which can load a 3D map from a 2D height map. It looks really good although I don't have any great maps yet.

First I had to create a height map to test the loader. I wasn't sure if I should use a picture or a text file. I decided on a text file since it's easier to store additional information about the map this way. I decided on a really simple format:


// A random 5*5 Sized Map
1,-2,4,1,4
-2,8,5,6,2
1,0,0,2,3
4,6,2,5,7
-1,0,4,3,2


To load that height map I first created a grid of 5*5 Vertices and connected them together with triangles so that they would form a Square pattern like so:


After that I simply assigned a number to each vertex so that they would be the height they should be in. A resulting height map of the Loader looked something like this in my 3D Engine:


Now I just would have to find the perfect size of the squares and the Height Map loader would be finished. I though of 32 times 32 pixels because most 2D video games use this tile size. I found 32 pixels too small to fit a 3D human into so I set it to 50 pixels. 50 Pixels is quite good and I'll probably stay at that size but I'm not sure yet.

Now to finish the Map loader I need to find a way to load objects (ex. trees, houses, chairs) into the map and place them at the appropriate position. Then I need to find a way to add colour to the whole thing, grey is kind of boring. After that I should find a way to make the Camera focus on a certain tile (probably the one with the player on it). I'm not quite sure how much more time I have before Christmas so I'm saying that the next MMORPG Day might be more than 3 days from now.

Merry Christmas!

MMORPG Day 4

On day 4 I ran into many things I hadn't even thought about.

One of the many problems is Animating the Characters model. I think I might group together many polygons and bond them with a "bone" point and when I do anything to that point it impacts all the polygons tied to it. That way by moving one vertex I can be able to move an entire part of a character (ex. Left Leg, Right Arm). I will also have to find some way to record the movement of the "bone" points in a simple text file. As stated before I'm kind of stuck there.

I also hadn't considered the Item class properly. I forgot to add any way the Item could interact with another thing. When I realised I added 3 new methods to the Item class; useonCharacter, useonItem, and useonTile. This way the Item can interact with players, other items, and the surrounding area. I have to create some kind of scripting language to create the results of an interaction. This Scripting language could also be useful with map related events. The scripting language would have to be simple, something like this:


(item)Fish+(character)Player
> Player is less hungry
> Fish Disappears
(tile)Tree+(item)Axe
> Tree dissapears
> Player gains (item)Wood
> 50% chance axe may brake


I also forgot about any kind of Levels the character may have. I think a simple array of numbers will do but I'm still thinking about it.

The thing I mainly worked on on Day 4 is This Applet. It took quite some tweaking to get the Applet to load files from the server it was stored on. I may write an Article about it later on. When you view the applet you should see a green cube rotating representing the character. It's loaded from a file and treated as a character would be. I will improve the characters visual appearance later on so don't panic =). On the top of the applet it says "3D Engine (ZBuffer: False)" which means that ZBuffering is disabled in the 3D Engine (as you may have guessed). On the bottom of the Applet is a series of letters harder to decipher. They basically represent the players character.

I'm kind of stuck on all fronts with the Character so if I don't solve the problems I'll continue on to the Map class and return later.

MMORPG Day 3

I finished the Character class on Day 3 of my MMORPG developing experience. It was pretty simple to create a method which would piece together a character from various 3D files. First I had to find a good way to save 3D models into files. I got myself a copy of K-3D and Blender to look at common file formats. I wanted it to be really simple so I wouldn't have any trouble with the data, I decided that maybe later I could think about using a proper file format. I picked the K-3D raw format since I as a human could understand it easily. It looks something like this:


# comments.. bla bla bla

# points
-1 2 3
6 -3 6
9 3 -5
1 5 8
-4 2 6
# polygons
1 2 3
3 4 1
1 3 2
1 3 4
1 2 4
1 2 3
1 2 3

First of all I loaded the file using the Java method I had created for loading text files. Then I excluded all lines starting with "#" except "# points" and "# polygons". I used those two comments as references as to what I was loading right now. I simply loaded all the points into a List using each of the three numbers as a coordinate (x,y,z). When I got to loading the polygons, triangles in this case, I picked the points out of the list with the corresponding index (ex. List Item number 1, 2, and 3) and created a Triangle with them which I then added to my Model.

I created a Model.merge method so I could load another model and merge it into the first model. This allowed for loading each part of a model separately, as was needed for my Character class.

Next I created a folder layout to save all my Character parts in. It would bring some more order into all the files I would need to create so that players could customise their character as they wanted. The folder layout looked something like this:

+CParts (character parts)
--Body
--Hat
--Gloves
--Shoes
--etc.

Each folder would have files in it with names ranging from the number 1 to something hopefully below 100. So to generate my players model I could simply load the corresponding file to the corresponding number in his Look Array from the correct folder. The number 0 in a players Look Array means that he isn't wearing that right now (ex. hat=0; not wearing a hat).

Once I finished that I started thinking about the Item class I would hopefully create on the next day. I didn't come up with anything but since my current speed is pretty good I hope I'll think of something tomorrow. If I don't, I'll start working on the Map class.

MMORPG Day 2

On day two of my MMORPG development I got bored of the working on the 3D engine so I started working on the character class. I thought it would be something easy and useful to do. I will go back to the 3D Engine later, for now it displays only one model in a relativity slow speed.

The character class started out easy, I just created variables which would store the characters data. These variables where:

- Name (of character)
- Position (Map Name)
- Position (X & Y)
- Action (ex. Walking, Sleeping...)
- Frame Number (frame of action)
- Logged On (yes/no)
- Chat (what the player is saying right now)
- Look (how he looks, what the player is wearing)
- Inventory (items the player is carrying)

I ran into some problems with the Look and Inventory. For the Inventory I decided an array of the class Item would do just fine. I will work on the Item class later on but for now it doesn't even exist. For the look I decided an array of numbers would do. Each number would represent one aspect of the characters look. For example:

1. Hair Style (1=Bald, 2=Punk, 3=Mohawk, 4=Normal)
2. Hair Colour (1=Blue, 2=Red, 3=Green)
3. Skin Colour (1=Blue, 2=Normal, 3=White)
4. Hat/Helmet (1= none, 2=gold helmet)
5. etc. etc. etc.

After creating the variables I went to work on the methods. The first and simplest method I created was toString. This method simply took all the variable and turned them into one string. The second method was fromString. This method took all the variables from a String. These two methods will hopefully help me later with the networking of the game.

The method I'm currently working on is the createModel method. It's supposed to take all the numbers from the number array Look and turn them into a 3D model for the 3D engine to display. I'm thinking about having a 3D file for each number of an aspect (ex. hair, skin, hat) and then just simply loading them and piecing them together. I'm not sure yet if that will work but I hope so.

Once I have that method finished I just need to create the item class and my character class will be finished.

MMORPG Day 1

I decided that a MMORPG (Mini Multyplayer Online Role Playing Game) would be something fun to work on. I hope I can finish it in the 19 days I have left of Christmas Break because afterwards I have exams and I won't be able to focus on programming. It's probably a world wonder if I do finish a MMORPG in 20 days but it won't be very big, that part comes later (I hope).

I'll write a daily Blog post so you guys know what's going on. I have decided that I will only dedicate full days to my MMORPG, nothing less. This way it will be easier for me to focus. If I take a break of working on my MMORPG (for whatever reasons) I will simply skip that day and continue on the next (If possible).

So on Day 1 of my MMORPG I made an outline of all the things I would need to program in Java. That way I will hopefully be able to tell exactly how much progress I have made and how much I still need to do. Here's the simplified outline:

- 3D Engine
- Map
- Character
- Networking
- Sound
- HUD / Menu

The 3D Engine is going to be the first thing I will work on. It will "simply" take 3D Models and display them on the screen. I have decided to use the 3D Engine I developed earlier on due to portability reasons. If I would take a 3D engine depending on graphic cards there certainly would be problems. I choose Java because of portability and I'll choose the 3D Software Rendering Engine out of portability too. Maybe later I'll add the option for people with good graphic cards to use them. I decided to work on this first so you people out there can see results quickly.

The Map will load a 2D tile based map and convert it into a 3D model which will be displayed by the 3D Engine. It will also store all the data of the players surroundings.

The Character will load a Characters DNA and make a 3D model out of it which will also be displayed by the 3D Engine. A Characters "DNA" includes all the characters Information in one short line of text. The Character stores everything about the player and what he's doing right now.

The Networking will probably be the hardest since I have no experience in that area at all. I'll just have to try this and that and hope it works. Wish me Luck!

The Sound and HUD are very low priority and will be the last thing I'm going to work on. The HUD may come a long as I work on my MMORPG and it may not, it depends on how much I need it.

I had some time left after making a good outline so I imported my old 3D engine and familiarised myself with it as it has been a long time since I last looked at it. It's working nicely and I'll just have to tweak some small things here and there to make it fit into a MMORPG. The biggest concern will probably be the speed but I'll find a way (hopefully).

Fog and Field of Vision

I've implemented some simple fog and field of vision.

Here's a picture:
The red line represents the end of the map. Now the map could go on almost infinitely so it's important that we stop drawing at some distance. This distance is the field of vision and is represented in the following image as a blue line.

To implement field of vision simply do a check:

Blogger is messing up my code, Trying to fix it soon

if((a.z+b.z+c.z)/3 <>

where a, b and c are the 3 vertices of the triangle.
This doesn't look quite so good so we try to blend it out with fog:

The green line represents the FogDistance, this is so that the fog doesn't start right in front of our eyes. That could get annoying, but sometimes it is wanted so just set the distance to 1 when needed. We simply add a little bit more black each time the triangle gets farther away from FogDistance:

Blogger is messing up my code, Trying to fix it soon

int r,b,g; // Color values of triangle

if((a.z+b.z+c.z)/3 > FogDistance) // Check if greater than distance
{
// Make Darker by distance to fogdistance*fogintensity
r = r-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
b = b-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
g = g-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
}
// Very important check if color values are acceptable:
if(r > 255) r = 255;
if(r < r =" 0;"> 255) b = 255;
if(b < b =" 0;"> 255) g = 255;
if(g < g =" 0">

int r,b,g // Color values of triangle
if((a.z+b.z+c.z)/3 > FogDistance) // Check if greater than distance
{
// Make Darker by distance to fogdistance*fogintensity
r-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
b-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
g-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
}
// Very important check if color values are acceptable:
if(r > 255) r = 255;
if(r < r =" 0;"> if(b > 255) b = 255;
if(b < b =" 0;"> if(g > 255) g = 255;
if(g < g =" 0;">



FogIntensity should be very small, just try it out. Something like: 0.0001

That's it for today, I'll hopefully implement colors next.

Halfway Finished

My engine finally has no more bugs (unless you count speed optimizations) and can show triangles in proper order with normal shading. Here's a picture of my marvelous self-replica rendered by my engine:


The applet is Here. Unfortunately inside the Applet there is only a cube as the above figure is loaded from a text file and an applet can not do that for security reasons.

Now how did I remove the hidden surfaces? Well you simply find the Z-normal of a triangle and see if it's positive or not. If it is, it's facing you, otherwise it isn't. To find the Z-normal use the following formula:

normal = (t.b.x-t.a.x)*(t.a.y-t.c.y)-(t.b.y-t.a.y)*(t.a.x-t.c.x)

Where t is your triangle, a,b, and c are the three vertices and x,y, and z are the vertices coordinates.

I'm not sure where to go next. Until now, bugs have guided me but now there are none left (Yaaaay! o.o). A few options which I can think of are:

- speed optimisations
- Shading with interpolation (smoother shading)
- Add colors and textures (textures are main problem)
- create a very simple game with my current engine
- take a break and do something else

I'll probably do speed optimisations first but as I said, I'm not sure yet.

Hidden Surface Removal

After a good nights sleep and looking over my problem I realized that I don't really have to solve the problem of z-fighting along the edges. The reason is this:

Do you see the green edges? well if z-fighting occurs along those edges it's not a big problem because you won't be able to see it since the wrong pixel will connect to all of the other pixels of the triangle it belongs to making it invisible. The points is, we can't see if pixels along the green edges z-fight so we don't have to fix that (lazy me =p).

Now how about the red edges? Well those are the problem, if a wrong pixel pops out from the other side of the cube it's totally out of place on the screen and doesn't connect to any other big body of same colored pixels which makes it really obvious that there is something wrong to the person looking at the applet.

Well we can get rid of the other half of the cube (the one which is not seen) by some type of hidden surface removal. This will speed up things and the red edges won't have anything to fight with therefore solving the problem. I'm not sure yet what the best way is to eliminate not seen triangles but I'll do some research and hopefully come up with an answer.

For those of you interested in solving the problem of z-fighting along the green edges for whatever strange reason ever it probably could be solved by adding a id number to each triangle and biasing the z-fight so that the triangle with the higher id would win even if it's pixel is deeper by 0.0001. I'll implement this when I'm terribly bored and have some spare time to waste. (probably never as it's not needed *.*)

Flimsy Edges or Z-Fighting

Sorry about not posting the past week but I had to do a lot of other things. We'll I hope this extra fat post will make you happy =).

First of all, here's the new Applet. (uses z-buffering)

My Z-buffering implementation is almost perfect but there are still some problems:

- Speed optimizations (I'll do this after finishing my 3d engine)
- Flimsy Edges / Z-Fighting

Here's a picture of what I mean by "flimsy edges":

This happens because of Z-fighting. Z-fighting is when two triangles fight for a place on the screen because they are both about the same depth. Here it is only edges which fight as only they have equal depth. The above edge (circled in red and magnified) has light gray shaded pixels from the triangle on the other side on it. In the applet it is a lot easier to see what I mean so take a look.

I'm not quite sure yet about how I should fix this, a few (bad) ideas which come to mind are:

- Don't make the edges equal, translate one edge by 0.000001. I really don't want to do this since it's annoying to do for big models and my engine should be able to fix this some other way. This would be the answer for when I'm desperate, which I'm not yet...

- Draw a line around each side of the triangle after I'm done drawing it eliminating pixels from other triangle around the edges no matter what depth they are. This would of course mean that the triangles would have to be drawn in the correct order which they are not.

- Do some research, which is what I'm going to pick for now.


Apart from fixing this Z-Fighting issue I plan to go over the previous and future posts with spell check. My posts don't have any labels/keywords so I'll add some. Also my title is all text and I think it would be nice to add a picture behind it, I'm just going to experiment a little with my blog layout and settings.

My geocities page which hosts the applets is all white except for the applet and doesn't have a proper menu. I'll try to make it look a little better. Also geocities is probably not the best choice so I'll look around for something without advertisements.

Triangle Interpolation

Triangle interpolation can be used for a lot of things like nice shading, color interpolation and of course, z-buffering. The way i did it (probably the quickest way) was like this:

First you interpolate to find the two edges of the line you're drawing right now:


So if you would be drawing the grey line, you would have to find the numbers 1 and 10 by interpolating the end points of the two red lines; 1-1 and 1-20.

Next you interpolate between these two points to find any pixels depth/color/shading:


Now just repeat this process for every line of your triangle and you will have a nicely shaded/colored triangle. Remember to switch to you second pair of lines once you have passed about half of your triangle:


My implementation of z-buffering is buggy (triangles are drawn smaller/bigger than necessary) so I cant show you guys the applet yet but i hope it will be fixed in two or three days.

Z-Buffering

I'm going to attempt to solve Z-Buffering like this:

Add a grid of numbers the size of the applet, One number per pixel. Now each time i draw a pixel I'm going to put the depth of that pixel into the grid. If the depth of the new pixel is higher than the depth of the old pixel I'm not going to draw it, otherwise i will.

To find the depth of a pixel in a triangle I will interpolate between the three vertex depths of the triangle, I'm not sure how yet.

I just finished a school project so ill have a lot more spare time. I plan to have Z-Buffering finished by Saturday or Sunday.

The Applet

Here's the Applet*.

The cube rotates randomly in all three directions (x,y,z). Use your mouse to drag the cube around. While you are dragging it you can see the wire frame and vertices.

This applet should make it apparent why I'm going to work on z-buffering next.

* Remember you will need a java (not javascript) enabled browser. If it doesn't work, go here: java.com and download the latest java runtime environment

Z-Buffering & Z-Sorting

Sometimes a picture can be worth a 1000 words:

And sometimes it isn't... I'm going to try to upload an applet so you guys can drag the cube around and see it rotating =).

Right now I'm trying to fix some things like:

This is caused by the over simplistic algorithm called z-sorting where you sort the triangles which make up the object by the average depth of it's 3 vertices (points) and then draw them from farthest to nearest.

Ill try to fix this by implementing z-buffering, or testing the depth of each pixel I draw and checking if it's going to be drawn onto a deeper pixel, if it is, I'll draw it, otherwise, I won't.

So my current ToDo list looks like this:
1. Upload applet
2. Fix z-buffering/z-sorting issue

I'm currently working on...

Im currently working on a 3d (software-rendering) engine. I think it started by me fooloshly thinking that it would be something easy and fun to do. Well I still think its fun and very interesting but not easy.

It's still very simple, heres a list of things it does:
- load 3d models from simple triangle lists
- rotate models in any direction
- translate models...
- fill in triangles
- draw wireframe...
- shade triangles with normal shading (only grey scale)
- has object and world coordinates
- uses z-sorting

The rendering process goes something like this:
- get object
- add world coordinates to object
- add camera coordinates to object
- 3d -> 2d coordinates
- draw object, sort triangles with z-buffering and shade with triangle normals

Ill try to post pictures or even an applet tomorrow.