Skip to content

Latest commit

 

History

History
75 lines (52 loc) · 6.55 KB

README.md

File metadata and controls

75 lines (52 loc) · 6.55 KB

My Portfolio Website

Game User Interface, Title Screen, Turn Order : C++ and SDL

By: Robert Misener

Installation:

  • Download and run in visual studio. Visit the SDL setup tutorial if you have problems or errors running it in Visual Studio. If there is any difficulty you can always contact myself as well.

Features

  • Title screen and animation
  • HUD displaying animated game characters and stats
  • Character stat bar graphs which render while hovering over a character
  • Turn order calculation and graphical display of turn order
  • Randomly generated stats for characters

Overview:

  • This is a small part of a solo project I have been building, on and off, for about 2 years. It was built from the ground up, starting as an empty console program. The graphics, sprites, and layout were created by myself in Blender, Gimp, and Photoshop using 3D models which were flattened into 2D sprites and then coded into the program using a hardware abstraction layer, specifically SDL (Simple Direct Media Layer).

  • As mentioned, this is part of a project that was made over a long period of time. Many of the variable names were not named with group work in mind and were created to be more understandable to myself while developing. As for the program in general, I admit the code is not perfect, but I am proud of the overall result. Unfortunately, like any creature bound by the laws of evolution, the program must stand on the shoulders of it's previous design decisions and I have learned much better programming practices since starting the project. There are still classes I want to modify and change dramatically, but in the meantime I must make due like the panda and grasp for my bamboo sticks using thumbs designed for tree-climbing; at least I will until the next coding monolith materializes.

Title Screen:

  • To create the title animation, I created a 2D image of the final title screen image in Photoshop, the water background was created using white spraypaint textures over some previous textures I had created for prior projects.
  • I then imported the title image as an image-plane into Blender, a 3D modeling program. I subdivided the mesh of the image plane into pieces and inserted animation key-frames containing their final connected positions.
  • I then separated the subdivisions of the mesh and recorded the now parted pieces as separate key-frames at the start of the timeline. I then rendered the result, which resulted in the appearance of the pieces of the title coming together as a whole.

  • I then placed the rendered PNG images in a spritesheet using GIMP 2.0.

  • After, I coded a reference to the image as a texture object in SDL, and created a rectangle outline which represented the size of one individual image in the sprite-sheet.
  • This representation of the rectangle was then multiplied by the number of frames in the image and put into an array, where through some 'for' loops, each frame of the animation sprite was recorded as a seperate image relative to where the x and y location of each rectangle (clip) was assigned to.

Stat Bars:

  • Stats are randomly generated from characters and are visually represented in the stat bars.
  • As you scroll over each character, the stats stored for each are projected onto the right of the screen in the form of graph bars for each respective stat.
  • This was done by entering the various stat properties for each character into a method that passed the integer values of each stat as the x-axis for SDL geometrical rectangles. The rectangles were then drawn to the screen whenever the mouse hovered over the character.

Character Sprites:

  • The character sprites were taken from 3d meshes I made in Blender. The skins for the characters were created in Gimp 2.0.

  • Like the title screen animation, the animation was rendered in Blender using keyframes.
  • Bones for each person had to be created and assigned in Blender.
  • The bones were moved and the keyframes of their position were recorded to make the human mesh move.

  • The animation was rendered in Blender, creating PNG images for each frame of the animation. The PNG frames were then arranged into a spreadsheet using Gimp, merging them into one image file.
  • Using the colorize function in Gimp, multiple copies of the image were created, with each copy containing a character in a now different colored shirt.
  • These five spritesheets were then used to render each of the five character sprites rendered on the screen,

Turn order

  • The initial turn order for each character is decided via a function that measures various character stats. The number is modified based on the stats of the other characters at the time of program compilation, so it is dynamically generated each time.
  • The rough turn order numbers of each character is sorted into an array. The values are sorted by turn order number and an array is returned that points to the reference of each character in order of their turn.
  • Using the new pointer array as an argument, an icon of each individual character is rendered to the screen in order of their turn.

Final Thoughts

  • Useful, up-to-date, and helpful documentation regarding SDL is hard to find, but available.
  • Using SDL and C++ was challenging compared to using a third party engine like Unity, but it seemed to result in more organic game design decisions and a more unique implementation of graphics.
  • Writing a good object oriented foundation from the beginning of a project is important, as design choices you make later will increasingly become affected by choices you made before.

See More Projects on My Portfolio Website