Englisch CS2D Mobile Dev. Blog (#4)

4 Antworten
Gehe zu Seite
Zum Anfang Vorherige 1 Nächste Zum Anfang
Hoch
SQ
Moderator
Online On
Hey.

Please use CS2D Blog Discord Server or CS2D Mobile Dev. Blog - Comments for the comments.

Some may have already known that I'm working on CS2D project using Unity.

I'm planning to weekly share development solutions from past 2 years of development.
There is a lot of content prepared beforehand that I can share weekly.

For now, I am going to introduce main libraries I've decided to use for the project.

I've developed 2D Lighting Engine which was primarily developed for CS2D Mobile and Dwerve.
This would be handling new Fog of War system as well, however I will keep this as a separate blog in the future.

Network (lib #1) - Mirror
Great network library for all the main server and client functionality.

Network (lib #2) - PUN 2
The main idea with the second library is that you could share third party servers from mobile.
I've encountered many issues with it, this might be removed in the future.

Scripting - MoonSharp
This would allow server & client-side scripting across all platforms.

Is this going to be on PC?
Even though this could easily compile on PC...
All game design decisions leans toward mobile gameplay.
I would say the current version of CS2D on Steam is way superior to anything I would release this.

Community
I am using this opportunity to start gathering community to test early alpha builds! (in a few months)

Discord: Discord Invitation

So the post isn't just text I'll include an image.
This is earliest as it can get, December 2018.
At that time I was trying to reach 60 fps slowest device I can lay my hands on.
IMG:https://i.imgur.com/m57Ln8Z.png


Next?
Next Blog is going to be about new 2D Player Character Animation
9× editiert, zuletzt 12.04.21 21:27:03
Hoch
SQ
Moderator
Online On
Sprite Skinning Editor

I was looking forward to improve player animation with smooth transitions.
Luckily, I've found that Unity was working on experimental build-in solution.

IMG:https://i.imgur.com/QyFuSvT.png


I've found a lot of advantages when using this system, as this would mean I can skip drawing individual frames for each animation. I think it's very cool, as it triangulates sprite into a mesh and applies skinned mesh awesomeness.

IMG:https://i.imgur.com/K2EC7yT.png


Pros
• Easy to setup
• One sprite for all animations
• Provides transform for each pivot in the sprite
• Works with animation system
• You can set depth for each pivot

Cons
• Does not work with third party sprite atlas (additional pass & draw calls)
• At first the performance was horrible

Important: You need to install Burst and new Unity Collections package to significantly improve performance.
I was able to optimize the system from 7ms to 0.25ms.

Unity Animation Tree (Mecanim)

Why Mecanim? Mainly because I thought it would allow me to seamlessly blend animations together, but little did I know.

IMG:https://i.imgur.com/xZHuCel.png

Different paths leading to four different weapon type animations for pistols, riffles, knifes, grenades.
Looks great, it seems to work, but it leads to several problems.

...but I want to add a bomb and more weapons with each of them having separate draw and reload animations. This leads to animation MESS Mecanim is known for.

Another issue is responsiveness. Some animations you want to be played the moment you press the button. Such as attack animation, you don't want it to be delayed additional frame otherwise it feels clunky.
This makes blending between animations quite useless.

After giving a thought, the best solution would be to simply play the animations from the code.

IMG:https://media4.giphy.com/media/LtfWYZ1o4Hs33NzLsp/giphy.gif


Animating Player

It's easy and better than I've expected!

So previously in original CS2D all animations were hardcoded, as BlitzMax did not have any animation system.
It would require a lot of time as every animation is written with separate peace of code. To test animation would require to build the game.

Okay now back to 2021 and we have Unity animation system.
It takes about 5 minutes to make new animation from scratch with no code involved!

IMG:https://i.imgur.com/5f6B6pP.png


Pros
• As easy as drag and drop
• All serialized properties can be animated
• Works with skinned sprite
• Head and weapon are included in animation though they are separate objects

Cons
I have little trust in Unity serialization system, every moment feels like everything could explode, but it doesn't .

Let have some fun!

I've made little android application dedicated for this blog entry.

IMG:https://media2.giphy.com/media/aPoz7xuhhUzhZKOhIP/giphy.gif


> Download Android Application Here

Comment!
Please use CS2D Blog Discord Server or CS2D Mobile Dev. Blog - Comments for the comments.

Next?
Next Blog is going to be about new HUD and Input System
3× editiert, zuletzt 28.03.21 18:49:50
Hoch
SQ
Moderator
Online On
HUD Layout

In my opinion, most of mobile shooter games have atrocious HUD.
They fill most of the screen with information you don't really pay attention to.
Therefore, they all look very similar, almost as if they are using same asset from unity asset store.
IMG:https://i.imgur.com/nvErLQx.png

For this reason, I am going with a minimalistic design approach.
I am trying to save as many pixels as possible, while still maintaining all the core functionalities.
Since there are many different devices, positions can be adjusted in the options.
IMG:https://i.imgur.com/ZjYUuG1.png

Special Action

Displayed between health & armor.
Command adapts to the situation - pickup, use, buying, bomb planting or defusing.


Binding

Double & Triple tap input can be changed with custom commands.
Bind Wheel allows to bind up to 4 different commands to the wheel.


Movement

Once joystick element maxes out, player transitions into running mode.
IMG:https://media.giphy.com/media/9yCctZ7XZyvEFjUo2h/giphy.gif



Aiming & Attacking

Once movement joystick element maxes out, player starts attacking.
Bullet elements also indicate weapon cooldown.
IMG:https://media.giphy.com/media/ueArGqTUzeRiBcJnp2/giphy.gif


Reloading

Progress bar is integrated into the combat joystick.
IMG:https://media.giphy.com/media/iMf6sbDmH2I4jUZBnN/giphy.gif



Weapon Switching

Each direction represents a different weapon type. ( Melee / Handgun / Riffle / Equipment )
Equipment - Defuse Kit, C4.
IMG:https://media.giphy.com/media/E3Bw9qVtvpv8c0gyo7/giphy.gif



Client Mod

The best part of this - it's a client mod!
That means all the functionality can be heavily tweaked.

Thanks
Special thanks goes to Tannenbaum for helping me with the design!

Comment!
Please use CS2D Blog Discord Server or CS2D Mobile Dev. Blog - Comments for the comments.

Next?
Next Blog is going to be about Map Rendering
2× editiert, zuletzt 28.03.21 20:19:02
04.04.21 21:30:34
Hoch
SQ
Moderator
Online On
Optimization 1 - Chunk System

Tilemap is split into chunks with size of 10x10.
This improves performance because 100 tiles are drawn in a single batch (draw call).
However this comes with a certain price.
Changing a single tile requires rebuilding the whole chunk.

IMG:https://i.imgur.com/MIDSAO3.png

Optimization 2 - Chunk Culling

Active chunks are disabled in a certain distance, while maintaining nearby tiles.
I've used Coroutines to avoid performance spikes from chunks changing states.
IMG:https://media1.giphy.com/media/zOrWXHIBftpK608Z4q/giphy.gif



Optimization 3 - Texture Atlas

Sprites are loaded into dynamic sprite atlases.
That's a custom system I've wrote to optimize set pass calls.
Multiple texture atlases are assigned to different tasks. (UI / Items / Players / Map)
IMG:https://i.imgur.com/lDbUrOS.png


What are Set Pass Calls & Batches (Draw Calls)?

Set Pass Calls & Batches are operations that passes information from CPU to GPU.
IMG:https://i.imgur.com/w0pl13q.png


• Set Pass Calls are responsible for shader information (textures, blending operations)
• Batches are responsible for geometry information.

Draw calls are going to be higher than set pass calls as you first need to pass geometry to render anything.

At the basic level it looks like this:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Set Pass Call 1
GL.SetPass(shader)

// Draw Call 1

GL.Begin(quads)
//  Tilemap
GL.End()

// Draw Call 2

GL.Begin(triangles)
//  Player
GL.End()


Comment!
Please use CS2D Blog Discord Server or CS2D Mobile Dev. Blog - Comments for the comments.

Next?
Next Blog is going to be about new Menu UI
1× editiert, zuletzt 04.04.21 22:23:23
12.04.21 21:26:53
Hoch
SQ
Moderator
Online On
New Scriptable UI

UI is no fun.

There are many challenges
• different resolutions
• different aspect ratios
• each element has it's own behaviour
• responsiveness
• performance

This is time consuming.

I was never a fan of build-in Unity UI. It has horrible performance, it's not extensive enough, it has a huge monobehaviour overhead as well, creates a lot of game objects.

You might say "but Unity has their scriptable GUI API".
It lacks useful methods and performance is horrific.

So I've decided to make my own custom UI system where I can take full control of it.

UI Positions

I've dropped the idea of pixels as a unit measurement and opted for percentages of the screen.
The screen has a Rectangle of (0, 0, 1, 1)
You can align elements to different sides of the screen.
Different ratio properties are used to avoid elements stretching from screen ratio.

Blur

I've decided to use moving map as the background for the menus.
To make it less distracting I've added some blur.
IMG:https://media0.giphy.com/media/yzXSolj7Z0Zq0YgC6P/giphy.gif



New Game

I am not a fan of mobile keyboards, so I've replaced some settings into buttons with presets (e.g. max players)
This menu could change as new settings are introduced.
IMG:https://media4.giphy.com/media/oCKRJLiHe8xjDI0xC9/giphy.gif



Lobby

Lobby was probably the most time consuming window to make.
All entities are synchronized with a master server.
IMG:https://media3.giphy.com/media/Lv8FbMzoXH1VdFTZC5/giphy.gif



Replays

Yes, we have replays, more about them later!
IMG:https://media0.giphy.com/media/dhp3PLjkGo8yYcUnWK/giphy.gif



Comment!
Please use CS2D Blog Discord Server or CS2D Mobile Dev. Blog - Comments for the comments.

Next?
Next Blog is going to be about new Loading System
4× editiert, zuletzt 13.04.21 07:26:57
Zum Anfang Vorherige 1 Nächste Zum Anfang