XNA Game Development – Part 4

The Joy of OO

image

Sitting here I was looking at my game, the image above is the first screen shot of the progress.  Yes not far, but I am working on it.  Anyway, there are a couple of things that I am so very thankful for.  The last time I wrote a game specifically for myself, or anyone (disregard the course I did, since I was referring to that).  But I was referring to a long time ago, the game was in BASIC, yep, that long ago.  What I am getting at is, the ease of programming now days, and I am not talking about libraries or the like that makes things easier I am going on about Object Oriented Programming (OOP).

This might seem like a no-brainer for some people especially the elitist OOPs out there, but in the early days of my programming, BASIC, Pascal, Assembly, Modula-2 and as you can see there isn’t a lot of OO languages in that mix, well certainly not when I was developing them.   Some of them have implemented some kinds of OO, when I was developing them it wasn’t in those languages.

Anyway to my point.  I am amazed that by creating the class, Ship, creating 2 instances of the ship, handling the different input to move each instance, and we have a simple ability to add more ships if needed.  Encapsulating the details of an object tightly into class makes this possible.  I would have done this using the above said languages, but, it would mean all of the code I used to move it, draw it, spin it would all need to be duplicated for each ship.  And if decided I wanted to add another ship, well that is something I wouldn’t have thought of back in the wonderful and heady days of procedural languages.

More Than Pretty Pictures

This is the next part, and it relates to the above image as well.  My friend are developing a game, we are developing the same game using two different technologies.  I am using XNA/C# and he is using HTML5/JavaScript.  Suffice to say I have it easier, Visual Studio 2010 Express is a wonder for a free application.

But the route we both went down to drawing the images on screen are different, and I am not talking about the engines.  He chose to draw a triangle on screen, then manipulate this.  His were nicely contained and he needed to update the image every time, since he is drawing each of the lines of his ship by hand.  Currently that isn’t an issue, see below.

image

This is an image of mine at a similar stage.  2 triangles on the screen.  They perform all the functions I want them to at this stage.  So, in the process of the other one, drawing the single lines to make up the triangles, isn’t a difficult choice to make at the time.  But the difference is not so much now.  But later.

I am utilising sprite, a simple game graphics display option from a long time ago.  See, once upon a time, when game developers were making games, they needed to draw pixels on the screen, sometimes you could draw them as lines or groups  as shapes depending on what you needed.  But all of these need to be done manually, with the introduction of the sprite it meant that art designers started getting more and more involved in the game making process.  This meant that visuals in games started getting better and better.  Granted we are still only talking about not many pixels but as graphics and processing power increased so did the number of pixels.

But these sprites were made by artists, people who know how to draw how to make things look better and use the real estate they have to do it.  See the HTML5/JavaScript version below.

triwars-mp-20121002

Please ignore the trails it doesn’t look like that in real time.  But in his code he will draw all three outlines then fill it in red.

What am I getting at, simple, the second image posted, with the 2 triangles they are sprites, plane and simple.  Must like they were used in the good old days, I simple tell the engine to draw the sprite.  It works out the details of putting the pixels on the screen.

Sure, the HTML5/JavaScript way is also saying I want to draw a line at this location and it will take care of putting the pixels on the screen.  But, if you look at the first image, the ships now look more detailed, same size in pixels, except they look better, more refined.  This was only done by me, imagine if I got a proper designed to do it.  In fact, this is what a proper designer can do;

BrettShip

Same number of pixels, well close,

RedShip

But the differences are staggering, from the original,

RedShip

I will leave all of that to a different time.  But, using an engine to draw things make it that much easier.  Why is the other way only have triangles, it is what he wanted to do.  Nothing more or less.

But the differences are in code and are up to the programmer;

HTML5/JavaScript

ship.drawTriangle = function() 
{
	context.save(); 
	context.translate(ship.x, ship.y); 
	// set the position of the center of the ship for rotation context.
	rotate(ship.direction*Math.PI/180); 
	// rotate the ship 
	context.beginPath(); 
	//Build the triangle 
	context.moveTo(ship.triangle[0][0]-ship.triangle_centroid[0],ship.triangle[0][1]-ship.triangle_centroid[1]); 
	context.lineTo(ship.triangle[1][0]-ship.triangle_centroid[0],ship.triangle[1][1]-ship.triangle_centroid[1]); 
	context.lineTo(ship.triangle[2][0]-ship.triangle_centroid[0],ship.triangle[2][1]-ship.triangle_centroid[1]); 
	context.lineTo(ship.triangle[0][0]-ship.triangle_centroid[0],ship.triangle[0][1]-ship.triangle_centroid[1]); 
	context.strokeStyle = ship.colour; 
	context.lineWidth = 1; 
	context.stroke(); 
	context.restore(); 
	context.fillStyle = ship.colour; 
	context.fill(); 
	context.closePath(); 
	// this is just for debugging context.font = "bold 16px Arial"; 
	context.fillText(ship.velY, 10, 50); 
	// draw it all 
	context.stroke(); 
};

XNA/C#

//Loading the sprite into the content manager 
shipSprite = gameContentManager.Load<Texture2D>(spriteContentName); 

//Draw the sprite, different function to above. 
spriteBatch.Draw(shipSprite, //The texture 
				position, //The position 
				null , //Not used, but Source rectangle 
				Color.White, //tinting colour 
				rotationAngle, //the rotation of the texture 
				origin, //the origin of the texture (centre)
				scale,  
				SpriteEffects.None, //Any simple texture manipulation 
				0f); //layer

There is a great difference here, but to compare them as apples and apples where in reality they are apples and oranges.  They are fruit, but I am relying on the content manager to handle the converting the data through its PNG import pipeline.  I then rely on the sprite batch instance to handle the drawing of the sprite in the manner I tell it.  Does it make me or him any better or worse programmers than each other, no, not at all.  But it shows the differences two programmers and the same project go about doing their coding.

But in essence what I am getting at is utilising the methods of drawing all of the elements yourself creates a lot of additional code you need to write and maintain.  Using the sprites like I am, and you can in the end get better looking results, but in the end I am at the behest of the developers of Content Manager and Sprite Batch objects, which is OK.  And any developer using an engine is also at the behest of the engine developer, but if it means I don’t need to write ALL that code, then I will be a happy chappy as graphics engine programmers are much like OS programmers, they need to do a very difficult job so the rest of us can have an easier one.

Sprite enable an easier method to get better look to your game without all of the fuss behind the scenes (if you aren’t coding it all yourself.).

References

Advertisements

Posted on October 2, 2012, in Development, Games, TriWars and tagged , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: