Day 3 - XNA: Hacking around with images

Posted by dapostolov on Geeks with Blogs See other posts from Geeks with Blogs or by dapostolov
Published on Mon, 26 Apr 2010 11:53:14 GMT Indexed on 2010/04/26 14:43 UTC
Read the original article Hit count: 374

Filed under:

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

  1. New Visual Studio Project
  2. Select the XNA Game Studio 3.1 Project Type
  3. Select the Windows Game 3.1 Template
  4. Type Prototype1 in the Name textbox provided
  5. 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

  1. Under "Content" in your Solution Explorer, right click and add a new folder and name it "Sprites".
  2. 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

  1. Now, open/edit  Game1.cs
  2. Locate the following line:  SpriteBatch spriteBatch;
  3. Under this line type the following:

        SpriteBatch spriteBatch; // the line you are looking for...

        Texture2D sprite;
        Vector2 position;

Step C - Load the image asset

  1. 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

  1. 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

  1. 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.

© Geeks with Blogs or respective owner