Category: Platformer

Planning and Designing 2D Character Controllers: Using Lucid Chart

digm520admin / / 2D, DesignResources, GameDesign, Platformer
January 28, 2021

Planning

2D Platformer Design


Lucidchart

Description:
Visualization tool for diagramming and flowcharting.

Overview

I want to begin designing the 2D platformer character controller creation tool, so I looked for diagramming and flowcharting tools and turned to Lucidchart. I have used it a couple times in the past, and thought it would be a good source to go to again for this. It covers both the helpful programming diagramming as well as just general note and design organization is a clean and visual way.

Design Start: Inspirations and Controller Component Breakdown

Since I want to make a strong character controller creating tool, I want to gather good resources to draw from to see what different components I want to include in the tool. To start this, I began laying out all the basic components that I think can make up a 2D platforming character in a game that I am interested in covering. To support this, I have also began listing games with strong or unique 2D platforming character controllers that I want to draw options and information from. This are shown below in the images created with Ludicchart (these are just the beginnings to start getting the information down and figure out how to start organization).

2D Platformer Character Controller Components: Start


Games to Research and Draw Inspiration

As I started to fill in the games, I noticed that some of them are distinctly different in what I consider pacing so I decided to separate those out for now. Recent Yoshi games and most Kirby games tend to be a bit easier on the difficulty side, especially compared to a lot of games on my list, which I think in turn makes them feel a bit lower paced. This may not be the most accurate term, as there are times a game such as Hollow Knight can be a bit slower paced, but I do not think it has anywhere near the feel that Yoshi and Kirby games has I am trying to convey.

Summary

So far Lucidchart has been fantastic just for visually organizing my thoughts and notes so far. The components are very cleanly organized because I can lay out the major component names, while attaching notes to those individual components to give a longer description as well as some game examples to explain them better.

via Blogger http://stevelilleyschool.blogspot.com/2021/01/planning-and-designing-2d-character.html

2D Platformer Follow Camera Tutorial by Press Start and my Chunk Camera Concept

digm520admin / / 2D, Camera, Platformer, Tutorial
January 26, 2021

Camera

2D Platformer Design

Title:
Mario Style Camera Follow Tutorial

By:
Press Start


Youtube – Tutorial

Description:
Camera tutorial that follows similar to Mario for 2D platformers.

Overview

I got to implementing this tutorial into my 2D platformer project, which let me observe some of the pros and cons of this approach the way they created it. They created a direct following camera, which used a threshold to determine if the player is some distance from the center of the camera, and if so, starts to follow them as they move. I also created my own camera controller variation which moves in more

Camera Controller: Follow Camera (by Press Start)

This is the camera controller created in the tutorial linked above. The camera follows an object, generally the player, smoothly as they press against the borders of the camera threshold. The object must move some significant amount of distance before the camera moves. This keeps the camera from constantly moving, keeping more of the environment in a static frame longer.

There is an offset distance which is the distance from the edge of the camera that sets the bounds of the threshold box. When the follow object moves outside of this box, the camera begins to follow it. As long as the object continues to move out of the box, the camera will continue to keep following it.

Unity Orthographic Size

Orthographic Size: half the height in world units that the camera renders


The horizontal dimension rendered is solely determined by the screen ratio along with the height determined by orthographic size. Determining the size of a camera to fit objects vertically is very straightforward, as it is just half of the world units you would like to render. If you want to fit something horizontally however, you must include the screen ratio and use that as a multiplier (screen height / screen width) to convert the world width into an orthographic size value.

Issue: Stuttering

Originally the camera following gave a stuttering, glitchy effect while following the player at times, especially when jumping. I believe this is a result of changing the speed value set for the camera to match the player speed when it is large, since it uses the magnitude of the player’s velocity vector. This can change a lot very quickly, especially when jumping since this combines the x and y vector values of the player’s movement at that point.

Changing this speed check and set to solely the x-axis helped with consistency for most movement because most movement is horizontal. This however will most likely have a large impact if there is a lot of vertical movement since it will still be looking at the player’s velocity in the x to move the camera, regardless of their y velocity.

My Implementation of the FollowCamera Script with Modification

Alternate Camera Controller: Chunk Camera

Because of the stuttering effect I originally encountered, I tried making another type of camera controller that I thought may be a good option. I wanted to use a chunk movement approach where once the player reached the threshold of the current camera position, it would move the camera in that direction an entire chunk distance, centering the camera on the next location as opposed to directly moving with the player. The idea with this is that it keeps the camera movement more consistent, as well as showing the player much more of the next area they intend to move into more quickly.

I approached this by creating an IEnumerator named TransitionCamera that activates when the player hits a threshold. This begins a Lerp movement for the camera to the next designated chunk area, determined at Start based on the screen size and the threshold distance. A chunk distance is determined as: screen size – threshold distance. This centers the camera one full screen over, with an overlap from the previous screen equal to the threshold distance.

I also added a check to stop the coroutine if it was running and it was determined that it should start moving again to prevent weird whiplash effects if a player somehow was able to move back and forth between two screens very quickly. While mostly effective, this did have the negative resulting bug of slightly offsetting the camera completely over time because the TransitionCamera coroutine would be stopped prematurely and start moving to a new location solely determined by the current location +/- the chunk distance.

My Chunk Camera Variation

Summary

The original FollowCamera camera controller had more issues than I anticipated, so making it clean and consistent will take significantly more work. The jitteriness of the original implementation is unusable, but the modification at least makes it decent to use as a base for now as long as most movement is horizontal.

The chunk camera modification is at least cleaner already, although it still needs a bit of tweaking to make something that does not get slowly offset over time. This however probably only works for specific games and cannot be used for every 2D game case. Having both of these options is nice moving forward and is easy to switch between.

via Blogger http://stevelilleyschool.blogspot.com/2021/01/2d-platformer-follow-camera-tutorial-by.html

Unity Tilemap 2D Basics and Unity Learn Introduction

digm520admin / / 2D, Platformer, Tilemap, Tutorial, Unity
January 20, 2021

Tilemap 2D

Unity

Beginner Programming: Unity Game Dev Courses


Unity Learn Course – Introduction to Tilemaps – 2019.3


Description:
Basics of using Tilemaps for 2D projects in Unity.

Tilemap Basics

Grid

  • Only one in scene
  • Creates layout for scene that Tilemaps rely on
  • Cell Size: size of each square on Grid; applies to all Tilemaps within Grid
  • Cell Gap: space between each square on Grid; applies to all Tilemaps within Grid
  • Cell Layout: layout of tiles on grid; Options such as rectangle, hexagonal, isometric, isometric z as y
  • Cell Swizzle: direction Grid is facing; options such as XYZ, XZY, etc.

Tilemap

There can be multiple in a scene and it has two components: Tilemap and Tilemap Renderer.

Tilemap Component

Controls how the Tilemap behaves and how tiles within it work.

  • Controls how Tilemap behaves and how tiles within work
  • Animation Frame Rate: affects spped of animated tiles in Tilemap
  • Color: color and transparency
  • Tile Anchor: where tile is anchored to grid
  • Orientation: direction tiles are facing

Tilemap Renderer Component

Change how tiles are rendered and sorting order.

Modes

Chunk Mode

  • Sprites on Tilemap rendered in batches with each batch being treated as a single sort item in the 2D transparent queue
  • reduced draw calls for performance
  • other renderers cannot be layered or rendered in between part of the Tilemap
  • ideal for terrain base layer or other “single depth” maps


Individual Mode

  • sprites sorted based on position in Tilemap and Sort Order
  • render to allow interweaving of sprites
  • good for allowing sprites to pass behind other sprites
Other Parameters
  • Detect Chunk Culling: detect chunk bounds automatically or set them manually
  • Chunk Culling Bounds: extension of bounds for culling in Chunk Mode
  • Mask Interaction: can make Tilemap visible only inside or outside a Sprite Mask
  • Material: change material used to render each tile
  • Sorting Layer: Layer defining Sprites’ overlay priority during rendering
  • Order in Layer: helps determine which Layer is rendered first

Tilemap Collider 2D

This is an additional component of the Tilemap object (with Tilemap Renderer). This makes the entire Tilemap have colliders. Having many individual tile colliders can cause objects or players to get caught on the seams, so the tile colliders can be combined using composites. This can be done on the Tilemap Collider 2D, just toggle on “Used By Composite” and add the components: Composite Collider 2D, and Rigidbody 2D.

The following image shows my use of these tile map basics using Unity assets from a separate Brackeys tutorial. I experimented with adding flipped and rotated versions of some of the existing sprites to the tilemap and using the automatic colliders of the tiles. I had issues with the separate tile colliders because they would catch the player moving along the floor, so this image shows the composite collider solution to fix the colliders. This solved that issue and cleaned up the colliders.


Basic Use of Tilemap and Colliders

Keyboard Shortcuts: Rotate and Flip

Flip Sprite: { “Shift + [“

Rotate Sprite: [

Summary

Tilemaps are actually extremely easy to use and seem to give pretty effective results. I did have the issue with the individual colliders immediately after using the automatic colliders, but it appeared to be resolved with the composite colliders, which combine the colliders into large contiguous colliders. The difference between selecting, moving, and brushing tiles can be weird sometimes, but I was able to get the hang of it eventually and the process became fairly smooth after a while. Finding the keyboard shortcuts for rotating and flipping was also a bit strange, but was very useful once I found it.

via Blogger http://stevelilleyschool.blogspot.com/2021/01/unity-tilemap-2d-basics-and-unity-learn.html

Jump Physics and Controller for 2D Platformer Tutorial by Press Start

digm520admin / / 2D, CharacterController, Platformer, Tutorial, Unity
January 19, 2021

Player Controller

2D Platformer Design

Title:
A Perfect Jump in Unity – A Complete Guide

By:
Press Start


Youtube – Tutorial

Description:
More involved tutorial for jump controls for 2D platformer.

Overview

This tutorial goes more in depth on the jump control and mechanics for 2D platformers. This starts to involve logic for varied jump heights when holding the jump button as well as ensuring the proper number of jumps (generally a single jump, but can help lead to double jump or multi-jumps). This tutorial also involves some simple animations through script to help add life to the jump mechanic, such as squeezing during the jump.

via Blogger http://stevelilleyschool.blogspot.com/2021/01/jump-physics-and-controller-for-2d.html

2D Platformer Mario Style Camera Follow Tutorial by Press Start

digm520admin / / 2D, Camera, Platformer, Tutorial
January 14, 2021

Camera

2D Platformer Design

Title:
Mario Style Camera Follow Tutorial

By:
Press Start


Youtube – Tutorial

Description:
Camera tutorial that follows similar to Mario for 2D platformers.

Overview

I want to get back to working with 2D platforming programming and came across this useful tutorial for creating a decent camera controller. Tutorials like this are always nice as the camera is a very critical element of the overall feel of a 2D platformer, but it isn’t something I necessarily want to focus my time on for now, so this gives me a good starting point that I can quickly implement and tweak for my needs starting out. If it becomes more critical later in the process, I can come back to it with other methods.

via Blogger http://stevelilleyschool.blogspot.com/2021/01/2d-platformer-mario-style-camera-follow.html

Brackeys 2D Movement and Melee Combat Tutorials – 2D Movement

digm520admin / / CharacterController, Platformer, Programming, Tutorial, Unity
September 30, 2020

Unity

2D Movement

Title: 2D Movement in Unity (Tutorial)
By: Brackeys
Youtube – Tutorial #1
Description: Tutorial for using a simple Unity player controller.

Title: MELEE COMBAT in Unity
By: Brackeys
Youtube – Tutorial #2
Description: Tutorial for setting up basic melee combat with a 2D player controller.

Overview

I started with the Melee combat tutorial but it referenced the movement tutorial for how they setup the starting movement and animation so I wanted to move back to them just to make sure I was starting in a similar spot. The player controller made in the 2D movement tutorial is actually pretty bad unfortunately, but I still wanted to use this melee combat tutorial as a base point for something that is workable but not amazing just to get an idea of how to approach combat.

2D Player Movement – Tutorial #1

While overall not a great tutorial, it did support some concepts I have come across. They separated the player input functionality and the actual movement application into the Update and Fixed Update methods respectively, which is a solid approach I have seen more and more in my search for information on player controllers now. However, all of the Fixed Update work was basically already done in a Player Controller script they gave you, so it really just covered programming the script responsible for receiving player input and passing it on to the movement logic.

To make matters worse, the given script does not even work particularly well. Its checks for the ceiling and the ground can give weird results unless at good ranged values which can prevent your player from crouching or jumping, or getting out of crouch at times. Then when air control is turned on, there is a bug where the character automatically crouches in midair (which removes their upper hitbox) simply from them jumping into objects as the ceiling sensor activates and automatically makes them crouch in the air.

I was able to fix the midair crouching bug by adding an extra check in the tutorial given script to also ensure the player was grounded before making crouch true. This led to another interesting aspect of the tutorial with the separation of input and actual player movement because the movement was receiving information from the input such as “is crouch being pressed” and then would use that information and check the surroundings (such as if they are under a ledge) to determine whether they could actually move out of crouch or not. This was just an interesting way of separating the input logic from the actual player control logic and is good to keep in mind for an input buffering system.

After fixing the bugs and messing with adding some animation similar to what they already have at the start of the melee combat tutorial, I did not have time to move on to that one. I will look into completing that next with my decent player controller in place now with most of the animations.

2D Melee Combat Tutorial and Game Kit with Thomas Brush

digm520admin / / Platformer, Programming, Tutorial, TutorialList, Unity
September 22, 2020

Game Development

2D Melee Combat

How To Make 2D MELEE COMBAT (Unity Tutorial + Free Game Kit!)

Youtube – Link

By: Thomas Brush


Referenced Previous Tutorial
How To Make 2D Platformers (Unity Fundamentals Tutorial)

Youtube – Link

By: Thomas Brush


First Portion

Camera

They start by using a VirtualCamera game object from the Cinemachine package within Unity. This camera object gives a lot of useful camera controls without having to build another from scratch. They mention another tutorial to help with paralaxing, so this may not be included in the virtual camera.

Character Animation

Spine

This seems to be the major animator they used, so this may be something worth looking into as I have come across it a lot now. For animation tips, they suggest strong bouncing effects on the vertical axis (squashing and stretching majorly in the y-axis generally, with some distortion in the other axis). Spine also gives you the option of different skins to provide the same set of animations to similar character type objects.

Animation State Machine

Again they reference a previous tutorial covering this more in depth. They do show how their animation system fires events to help perform certain actions in tandem with the animations without necessarily adding more programming. Examples for this include emitting particles or playing a sound on animation start or end.

Continuing 2D Melee Combat Research for Unity

digm520admin / / CharacterController, Platformer, Tutorial, TutorialList, Unity
September 4, 2020

Unity

2D Melee Combat

Easy 2D Melee Combo System in Unity: Tutorial

Youtube – Source #1

By: ChosenPlay


2D Game Dev Tutorial – Melee Attacking in Unity (Sprites included)

Youtube – Source #2

By: Lost Relic Games


Basic Combat – 2D Platformer Player Controller – Part 9 [Unity 2019.2.0f1]

Youtube – Source #3

By: Bardent


Overview

After finding a decent basic starting point for 2D melee combat in Unity, I wanted to find a few more sources and options to support and develop that further. These sources I found look more into the animation options a lot, as well as some minimal input buffering as well as chaining/comboing, hitbox activation, and state machine implementation.

Source #1

Source #1 uses some transition animations to provide an example how to nicely transfer between various action animations when allowing characters to combo. This option also shows some minimal state machine usage (which seems like a strong candidate as a foundation for these character controllers).

Source #2

Source #2 delves into a large chunk of setting up a character controller with a focus on the melee combat. It explores the animation setup as well as an in depth showing of the programming behind everything. This includes basic character controller work as well as how to perform the combat input and hitbox activation. Most control is done directly through the Update methods here so it works better as a learning tool than a foundation for a proper system.

Source #3

Source #3 is another very basic option that is also in a tutorial set, so it will most likely provide the least information but could still give some helpful options. Being part of a tutorial set also helps me keep track of the entire set in case I wanted to follow it more before or after this specific tutorial.

Unity Melee Combat Basics with Brackeys Tutorial

digm520admin / / CharacterController, Platformer, Programming, Tutorial, Unity
September 3, 2020

Unity 2019

Melee Combat

MELEE COMBAT in Unity

Youtube – Link

By: Brackeys


Summary

I want to explore making 2D character controllers, so looking to add melee combat as an option is a very common addition that I want to understand better. Being a Brackeys tutorial this is a rather basic approach with very Unity specific options, but it at least provides a good starting point to get something up and running. I would like to look into other options to add to this so I know a few ways to add hitbox generation nicely to characters and agents alike.

Ori and the Blind Forest: Building in Unity

digm520admin / / Platformer, Tutorial, Unity
April 27, 2019

Mimicing Ori in Unity

Bash Action

Youtube – Ori and the Blind Forest – Game Design Reel

By: James Benson

Youtube – Making Ori Y Bash [Unity C#] (Ori and the Blind Forest) #1

By: Wabble – Unity Tutorials

As a big Ori and the Blind Forest fan, I just wanted to see if I could find some tutorials to put together some of the movement or actions given to the player in Ori. The first video is a cool sample of a lot of the different game mechanics seen in Ori, as both their simple concept version as well as their in game version. This is actually extra helpful as the concept version really simplifies it down to what is really happening and makes it easier to process and disect to replicate.