It's time to get into actual gameplay and prototype a simple character that moves left and right with arrow keys. I'll also make a super simple map to get started with sprites.
arrow keys to move, with a very basic map
I reorganized the folders quickly
If you need something that can walk/jump/shoot and needs to be controlled trough user input, the class you need is Character. That class is full of usefull premade movement features. The only problem is that it is meant for 3D models. So we will have to use a special subclass PaperCharacter meant for 2D.
Folder /Content/Character -> create a blueprint class, name it "MegamanCharacter"
Find the PaperCharacter class
File MegamanCharacter - default viewport
As you can see there are A LOT of properties in Character classes. We can safely ignore almost all of them and use only what we need. Let's start by setting the character idle state.
We are going to need a flipbook
FlipBook is a class made to hold many sprites and play them as an animation. Our idle state has only one Sprite because it is not animated. So the way to go is - take the megaman idle image -> extract it as a Sprite -> make a FlipBook from the Sprite
Extract the sprite from megaman_idle_image.png
click extract -> name the sprite "MegamanIdleSprite"
File MegamanIdleSprite - well... it's blurry and disgusting
Long story short: Unreal tries to smooth your images on import so that they will play nicely with different sceen resolutions.
Because we want our pixels to actually look like pixels, we will have to tell the engine to treat our images as potential sprites. And this is quite easy:
right click the image - sprite actions -> apply Paper2D Texture Settings
close and reopen the MegamanIdleSprite to check
Now that you know this trick, you can apply "Paper2d Texture Settings" to the images we used for the main menu. They will look much more like pixel art assets.
right click MegamanIdleSprite -> create FlipBook, name it "MegamanIdleFlipBook"
File MegamanIdleFlipBook -> set fps to 0 and collision to first frame
File MegamanCharacter - Sprite -> set the default Flipbook
File MegamanCharacter - Capsule Component -> set the dimensions to 17x10
Level Level_Intro -> drag and drop the character in the world, set its position to 0,0,0
That's a slightly annoying feature called "Auto-exposure" (or "Eye adaptation").
In a 3d environment it can be usefull but we don't need it for our game, so let's disable it real quick.
Level Level_Intro -> create a Post Process Volume
Level Level_Intro - Post Process Volume -> set position to 0,0,0 and activate infinite extent
Level Level_Intro - Post Process Volume - Lens - Exposure -> set compensation to 0 and brightness to 0.9
the eye adaptation glow should be gone now
So our character is in the world but we still need to tell the game that we'll be controlling it and give it a camera so that we can actually see what happens.
File MegamanCharacter -> add a camera
File MegamanCharacter - Camera -> set position and various aspect ratio options
File MegamanCharacter - Self -> set auto possess player to "Player0"
If you try to play the game, you should see Megaman in the middle of the screen
We're going to need a very simple map to test out movements and collisions. It's time to build a TileMap from a TileSet of sprites.
create a TileSet from the floor image, name it "FloorTileSet"
Because the character has to be able to walk on the floor, we'll have to set collisions for every block before we start building a map with the set. To add collision shapes, select a tile -> click "Add a box" -> select and move vertices until the box matches the tile's image.
How to add collision boxes to Tiles
Create a TileMap from FloorTileSet, name it "FloorTileMap"
File FloorTileMap - default view
How to paint a TileMap
Level Level_Intro -> place the FloorTileMap in the world
Project Settings - Input -> add 1 axis mapping and bind the arrow keys
Axis mappings are fired every single frame, they are usefull for continuous input like joystick directional pads or key that needs to be pressed for extended period of times.
File MegamanCharacter - Blueprint -> when the move event is fired -> add movement to the character on the x axis
File MegamanCharacter - Character Movement -> tweak the walk speed (the base values are meant for a 3d character)
It would be nice if when we move, the animation changes to a running cycle. This is incredibly easy if your spritesheets are properly set and if every sprite is in the right order. Let's extract the sprites from the "megaman_running.png" asset file.
Extract sprites from "megaman_running.png" -> move them to /Content/Animations/Megaman/Running
Select all the sprites from the running cycle -> create a FlipBook, name it "MegamanRunningFlipBook"
File MegamanRunningFlipBook -> set the collision to per-frame
File MegamanCharacter -> add the blueprint to change animation and rotation when there is an input
We had to go trough a lot of hoops to get basic things working but it's actually coming together nicely. Obviously it's still a very young prototype and there are many issues with it. But for now, it's good enough and I think we should move on.
I'll come back later to polish this section further as usual.
You can add the sky sprite behind our scene to give it a better background