A downloadable game

I made a sprite sheet animator for OpenGL that takes a png image like this:

Then animates it like this:

This system can also display static images that can be used for backgrounds or objects in the game.

HOW TO USE:

To start download and unzip this project into your graphics engine project folder.

In Visual Studio you can use your existing filter structure or make this one:

Make sure that your property sheets are set up in your graphics project. We will be using OpenGL (and Direct3D in the future)
Debugging make sure to set your working directory to your build game output folder.

Add these shader files to their respective folders in your engine.

Now, we can start adding these files to our graphics library. There is going to be an assumption that you have basic graphics functionality already implemented and are just missing essentially Textures.

In your vertex mesh add UV floats. Also, colors if you have not already.

When sending mesh data to the gpu you need to set a vertex attribute pointer to point at the location of our new UV floats. (cMesh.gl.cpp)

This step is the same for sending a vertex attribute pointer to color.

I found this image online that displays exactly whats doing on.

This is the data I pass into the graphics thread to be used when rendering a frame.

Set up your game object to set relevant draw data:

This will most likely be in your game itself and not your engine.
The file location for your textures will be in your game build output folder, but you will need to add the folder manually once the game is built once. I plan to make a proper builder in the future.
Your game object should automatically set the AnimatorVertex.shader and AnimatorFragment.shader locations because this data will never change between sprite sheets.
The order that graphics draws this data matters. All draws will overlay on top of the previous draw. So background images need to be drawn first.

Now that we have the data we need being passed into our graphics engine we can work on drawing our animation. (cGraphics.cpp)

Include the new cAnimator class header.

Add a cAnimator pointer to where you are storing your shader data and mesh data to be built and later binded.

This is where you have your Render Frame and make your binds, draw calls, etc.

In my engine I check for new draw data and use my factory function to build mesh, effects, and now an animator.

Now, we need a way to update the Animators data so that we can switch animations with key presses.

To display the Animation we need to Bind our texture and pass some data to the given shaders.

Don’t forget to clean up your memory! (glDeleteTextures will be called by garbage collection)

Final Thoughts:

In the given cTexure.gl.cpp file you can edit OpenGL texture parameters, but right now it it set up for pixel art.

If your image has a black background make sure to enable blending.

You can hard code the colors inside the cAnimator.cpp. I plan to add functionally to set the colors while the game is playing.

This project has utilized everything we have learned this semester. Honestly I couldn’t think of a better test to solidify and test the knowledge of every weeks assignment.

I greatly struggled with the structure of my code. It was very difficult to build on top of the engine and specifically passing the new data I needed through the graphics thread. I also spent a ton of time trying to make it a separated static library, but caved and added it to the graphics engine. Just getting a texture to render was an absolute nightmare because I had to write so much code without being able to test it.

Here is my first Color passing and UV test. (UVs are scaling the color)

This was my first texture I got to display:

I struggled with a bug where images are not overlaying correctly, but it was because of the way I am passing data into my graphics engine. I wanted to be able to call SubmitDataToGraphics as many time as I wanted and let the engine determine the amount of effect mesh pairs to make. I did this by using a Set like a fool because it sorts data. This is why the image layering seemed completely random since it was ordering pointers. During the presentation I thought it was because of the how threads are asyconus but realized that didn’t make any sense.

There was a small bug where images were flickering, but this was because I was being lazy and trying to reload the textures by calling the factory function again to reload new UV vertex data. This was fixed by moving the animation code to the shader and passing the necessary data to the fragment shader using Uniform1i. This also greatly improves performance.

When thinking about how to implement this system I thought about storing multiple pngs for each individual frame of the animation, but the performance difference would be substantial. There is the overhead of storing any image type, needing to keep all of them in ram or filling your gpu texture slots. This system has the ability to store a single image texture and to some very performant shader math to step between different sections of the texture.

I made an effort to keep everything platform independent for the future directX implementation. So there are no openGL calls within graphics.

Things I’m going to be adding for my game:

Colors that can be changed after vertex mesh has been sent to GPU.
- This will be done by sending data into the fragment shader and doing some math.
Scaling the Size of the image
- This will be done by sending data into the vertex shader and doing some math.
Different animation lengths on the same sprite sheet (Amount of X steps per Y step).
DirectX support
Image Builder to make a directory for your images.

If any of these features are of interest to you; Ill be updating this page and downloads. Also come talk to me if you would like anything else.

If you would like to learn more about textures here are some references I used:

https://learnopengl.com/Getting-started/Textures

https://open.gl/textures

https://www.programmingcreatively.com/opengl-tutorial-4-qs.php

https://youtu.be/n4k7ANAFsIQ?si=7hr9jxYftBIMaCu3

https://youtu.be/wVkLeaWQOlQ?si=UEBHrzVLkWQb0Gnp

https://youtu.be/liJac6RysE4?si=8V-vwrPj14RTMpVq

https://youtu.be/3mfvZ-mdtZQ?si=UvzOf-xFNtt16MK3

https://youtu.be/nJNj25AMXVo?si=OGYe-2AehY_Zf7hM

https://youtu.be/n8t7nvHCqek?si=QzJsPFFiKEXZNykX

How to get connected with me for support: