Loading an Image

Otter has some features built in for prototyping such as Image.CreateRectangle and Image.CreateCircle.  Beyond that Otter supports loading images through SFML.  Any image type that SFML can load, Otter can also load.  The available formats are bmp, png, tga, jpg, gif, psd, hdr and pic.

Let's set up a simple example that loads a few images as the graphics for some Entities.

using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace LoadingImage {
  class Program {
    static void Main(string[] args) {
      // Create the Game
      var game = new Game("Loading Image");
      // Set the background color of the game
      game.Color = Color.Gray;

      // Create a Scene
      var scene = new Scene();

      // Add an Entity that will use Block.png as its Image
      scene.Add(new ImageEntity(150, 150, "Block.png"));
      // Shroom.png
      scene.Add(new ImageEntity(520, 100, "Shroom.png"));
      // Face.png
      scene.Add(new ImageEntity(250, 380, "Face.png"));

      // Start the Game using the Scene with the Entities in it

  class ImageEntity : Entity {
    public ImageEntity(float x, float y, string imagePath) : base(x, y) {
      // Create an Image using the path passed in with the constructor
      var image = new Image(imagePath);
      // Center the origin of the Image
      // Add the Image to the Entity's Graphic list.

The example code requires these three images:

In the example we'll be loading in these images on Entities in the Scene.  To get these images loading with our project in Visual Studio it will require some minor set up.

First put all three images in the same folder as your project.  In Visual Studio in the Solution Explorer there's a button that looks like this at the top:

This is the Show All Files button.  It will show you all the files in your project folder instead of just the ones that have been loaded into the project.

When you click this it should reveal Shroom.png, Block.png, and Face.png in the project folder.  You can select all of them by left clicking on each one while holding the Shift key.

With all of the files selected, right click on one of them to find a menu with the option "Include in Project"

Clicking on Include in Project will include those images into the project.  The next step is to have Visual Studio copy those files into the bin folder whenever we compile and run our game.  The bin folder is where the executable file of your game ends up after you compile.  The images will need to be the same folder as the executable for this example to work.  

Select all of the image files again and now check the Properties window below the Solution Explorer.

Select "Copy if newer" for the "Copy to Output Directory" option.  This ensures that Visual Studio will copy the images to the bin folder whenever we compile the game, and the image files are newer than the image files already in the bin folder.

Now running the example you should be greeted with something that looks like this: