top of page

Monogame Tutorial 2: How to get images onto the screen.

  • Writer: Neko Nicku
    Neko Nicku
  • Feb 12, 2018
  • 2 min read

How to get sprites onto the screen & position them.

First open up the Content Pipeline tool by double clicking on it in the content folder of the game (from within VS or Xamarin)

Add the sprite files by clicking the “Add existing files” button (1) - choose copy files to directory if a pop up appears.

click on Content and choose the operating system you are using from the properties menu in the Platform drop down.

click build (2)

and save. (3)

open back up VS or Xamarin.

at the top of the file type

Texture2D *name of sprite*;

for example

Texture2D background;

Next go down in the code to this section below load content and write

*name of sprite* = Content.Load<Texture2D>(“*name of sprite*);

this loads the sprite into the program.

now the image is set up and available to use in the program you can draw it to the screen by going to the Draw section and writing the following:

spriteBatch.Begin();

spriteBatch.End();

You need to add the begin and end of the sprotebatch before you can have anything drawn to the screen.

once you’ve added those, go in-between them and add the following.

spriteBatch.Draw(*name of sprite*, new Vector2(0, 0), Color.White);

Vector2 is the location of the image. if you change this to a variable that is changed during the game it can be updated here to seem like the sprite is moving.

use Color.White to make it appear as normal, any other colours give it a tint.

press run to see if it worked.

add more sprites in the same way. make sure to add them in the right order in the draw section though, whatever is drawn first will get overwritten by whatever is placed next in the code, so in this example, the background will be underneath everything else.

Recent Posts

See All
Monogame Tutorial 1: Mouse Click.

How to check if mouse has been clicked. to check the state of the mouse make a variable at the top of the file underneath this code. ...

 
 
 

Comments


  • Twitter Social Icon
  • Google+ Social Icon
  • YouTube Social  Icon
  • Instagram Social Icon
bottom of page