Day 3 - XNA: Hacking around with images
- by dapostolov
Yay! Today I'm going to get into some code! My mind has been on this all day! I find it amusing how I practice, daily, to be "in the moment" or "present" and the excitement and anticipation of this project seems to snatch it away from me frequently.
WELL!!! (Shakes Excitedly) Let's do this =)! Let's code!
For these next few days it is my intention to better understand image rendering using XNA; after said prototypes are complete I should (fingers crossed) be able to dive into my game code using the design document I hammered out the other night.
On a personal note, I think the toughest thing right now is finding the time to do this project. Each night, after my little ones go to bed I can only really afford a couple hours of work on this project. However, I hope to utilise this time as best as I can because this is the first time in a while I've found a project that I've been passionate about.
A friend recently asked me if I intend to go 3D or extend the game design. Yes. For now I'm keeping it simple.
Lastly, just as a note, as I was doing some further research into image rendering this morning I came across some other XNA content and lessons learned. I believe this content could have probably been posted in the first couple of posts, however, I will share the new content as I learn it at the end of each day. Maybe I'll take some time later to fix the posts but for now
Installation and Deployment - Lessons Learned
I had installed the XNA studio (Day 1) and the site instructions were pretty easy to follow. However, I had a small difficulty with my development environment. You see, I run a virtual desktop development environment. Even though I was able to code and compile all the tutorials the game failed to run...because I lacked a 3D capable card; it was not detected on the virtual box...
First Lesson: The XNA runtime needs to "see" the 3D card!
No sweat, Il copied the files over to my parent box and executed the program. ERROR. Hmm...
Second Lesson (which I should have probably known but I let the excitement get the better of me): you need the XNA runtime on the client PC to run the game, oh, and don't forget the .Net Runtime!
Sprite, it ain't just a Soft Drink...
With these prototypes I intend to understand and perform the following tasks.
learn game development terminology
how to place and position (rotate) a static image on the screen
how to layer static images on the screen
understand image scaling
can we reuse images?
understand how framerate is handled in XNA
how to display text , basic shapes, and colors on the screen
how to interact with an image (collision of user input?)
how to animate an image and understand basic animation techniques
how to detect colliding images or screen edges
how to manipulate the image, lets say colors, stretching
how to focus on a segment of an image...like only displaying a frame on a film reel
what's the best way to manage images (compression, storage, location, prevent artwork theft, etc.)
Well, let's start with this "prototype" task list for now...Today, let's get an image on the screen and maybe I can mark a few of the tasks as completed...
C# Prototype1
New Visual Studio Project
Select the XNA Game Studio 3.1 Project Type
Select the Windows Game 3.1 Template
Type Prototype1 in the Name textbox provided
Press OK.
At this point code has auto-magically been created. Feel free to press the F5 key to run your first XNA program. You should have a blue screen infront of you. Without getting into the nitty gritty right, the code that was generated basically creates some basic code to clear the window content with the lovely CornFlowerBlue color.
Something to notice, when you move your mouse into the window...nothing. ooooo spoooky.
Let's put an image on that screen!
Step A - Get an Image into the solution
Under "Content" in your Solution Explorer, right click and add a new folder and name it "Sprites".
Copy a small image in there; I copied a "Royalty Free" wizard hat from a quick google search and named it wizards_hat.jpg (rightfully so!)
Step B - Add the sprite and position fields
Now, open/edit Game1.cs
Locate the following line: SpriteBatch spriteBatch;
Under this line type the following:
SpriteBatch spriteBatch; // the line you are looking for...
Texture2D sprite;
Vector2 position;
Step C - Load the image asset
Locate the "Load Content" Method and duplicate the following:
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
// your image name goes here...
sprite = Content.Load<Texture2D>("Sprites\\wizards_hat");
position = new Vector2(200, 100);
base.LoadContent();
}
Step D - Draw the image
Locate the "Draw" Method and duplicate the following:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
spriteBatch.Draw(sprite, position, Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
Step E - Compile and Run
Engage! (F5) - Debug!
Your image should now display on a cornflowerblue window about 200 pixels from the left and 100 pixels from the top.
Awesome! =)
Pretty cool how we only coded a few lines to display an image, but believe me, there is plenty going on behind the scenes. However, for now, I'm going to call it a night here. Blogging all this progress certainly takes time...
However, tomorrow night I'm going to detail what we just did, plus start checking off points on that list!
I'm wondering right now if I should add pictures / code to this post...let me know if you want them =)
Best Regards, D.
