CS2D Mobile Dev. Blog (#5)
5 replies
1 
CS2D Mobile Dev. Blog (#5)16.03.21 04:40:39 pm
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.
Next?
Next Blog is going to be about new 2D Player Character Animation
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.
Next?
Next Blog is going to be about new 2D Player Character Animation
edited 10×, last 18.04.21 05:44:40 pm
Blog #1 - 2D Player Character Animation20.03.21 05:05:20 pm
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.
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.
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.
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.
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!
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.
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
I was looking forward to improve player animation with smooth transitions.
Luckily, I've found that Unity was working on experimental build-in solution.
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.
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 horribleImportant: 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.
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.
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!
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 objectsCons
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.
Download Android Application HereComment!
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
edited 3×, last 28.03.21 06:49:50 pm
28.03.21 06:49:05 pm
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.
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.
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.
Aiming & Attacking
Once movement joystick element maxes out, player starts attacking.
Bullet elements also indicate weapon cooldown.
Reloading
Progress bar is integrated into the combat joystick.
Weapon Switching
Each direction represents a different weapon type. ( Melee / Handgun / Riffle / Equipment )
Equipment - Defuse Kit, C4.
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
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.
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.
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.
Aiming & Attacking
Once movement joystick element maxes out, player starts attacking.
Bullet elements also indicate weapon cooldown.
Reloading
Progress bar is integrated into the combat joystick.
Weapon Switching
Each direction represents a different weapon type. ( Melee / Handgun / Riffle / Equipment )
Equipment - Defuse Kit, C4.
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
edited 2×, last 28.03.21 08:19:02 pm
04.04.21 09:30:34 pm
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.
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.
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)
What are Set Pass Calls & Batches (Draw Calls)?
Set Pass Calls & Batches are operations that passes information from CPU to GPU.
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:
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
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.
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.
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)
What are Set Pass Calls & Batches (Draw Calls)?
Set Pass Calls & Batches are operations that passes information from CPU to GPU.
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
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()
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
edited 1×, last 04.04.21 10:23:23 pm
12.04.21 09:26:53 pm
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.
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.
Lobby
Lobby was probably the most time consuming window to make.
All entities are synchronized with a master server.
Replays
Yes, we have replays, more about them later!
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
UI is no fun.
There are many challenges
different resolutions different aspect ratios each element has it's own behaviour responsiveness performanceThis 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.
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.
Lobby
Lobby was probably the most time consuming window to make.
All entities are synchronized with a master server.
Replays
Yes, we have replays, more about them later!
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
edited 4×, last 13.04.21 07:26:57 am
18.04.21 05:48:40 pm
Loading Bar
Loading screen is going to look like reloading!
Loading System
Loading is very important!
It handles complicated and long processes, execute them in proper manner.
There are many systems that are asynchronous, so it's easy to mess it up.
For example joining a game and loading all systems can take up to 100 different loading states.
Error Management
Error management and popups is tied to the same loading system.
There can be multiple errors being thrown up.
You can find number of errors next to the header of popup window.
Facebook
Official Facebook game page has been opened.
Link: https://www.facebook.com/cs2dlegacy
Comment!
Please use CS2D Blog Discord Server or CS2D Mobile Dev. Blog - Comments for the comments.
Next?
Next Blog is going to be about Scoreboard
Loading screen is going to look like reloading!
Loading System
Loading is very important!
It handles complicated and long processes, execute them in proper manner.
There are many systems that are asynchronous, so it's easy to mess it up.
For example joining a game and loading all systems can take up to 100 different loading states.
Error Management
Error management and popups is tied to the same loading system.
There can be multiple errors being thrown up.
You can find number of errors next to the header of popup window.
Official Facebook game page has been opened.
Link: https://www.facebook.com/cs2dlegacy
Comment!
Please use CS2D Blog Discord Server or CS2D Mobile Dev. Blog - Comments for the comments.
Next?
Next Blog is going to be about Scoreboard
1