Megaman X - Basic movements

14-07-2021 10:32


The end result

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

Cleaning up first

I reorganized the folders quickly

How to have a 2D character that can move ?

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

Why are my imported/extracted images blurry?

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.

Back to creating the FlipBook

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

Adding the character to the world

Level Level_Intro -> drag and drop the character in the world, set its position to 0,0,0

Why are my sprites glowing when there is no light ?

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

Back to the character

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

Time to build a simple map

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

New user inputs

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)

How to change the FlipBook animation on key press

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

That was a lot

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

link Improve the TileSets with padding
coming soon
link Integrate background in the TileMap
coming soon

Come talk to us on Discord.

Ask questions, request new tutorials or just say hi.

Unreal Master on discord

Want to learn UE5?

Become a member of our community!

Join Us