Forum

> > CS2D > General > CS2D Mobile Dev. Blog (#25)
Forums overviewCS2D overviewGeneral overviewLog in to reply

English CS2D Mobile Dev. Blog (#25)

25 replies
Page
To the start Previous 1 2 Next To the start

old important closed CS2D Mobile Dev. Blog (#25)

SQ
Moderator Off Offline

Quote
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
edited 31×, last 11.01.22 04:44:54 pm

old Blog #1 - 2D Player Character Animation

SQ
Moderator Off Offline

Quote
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
edited 3×, last 28.03.21 06:49:50 pm

old Blog #2 - HUD & Input System

SQ
Moderator Off Offline

Quote
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
edited 2×, last 28.03.21 08:19:02 pm

old Blog #3 - Map Rendering

SQ
Moderator Off Offline

Quote
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:
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
edited 1×, last 04.04.21 10:23:23 pm

old Blog #4 - Menu UI

SQ
Moderator Off Offline

Quote
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
edited 5×, last 09.05.21 01:37:07 pm

old Blog #5 - Loading System

SQ
Moderator Off Offline

Quote
Loading Bar

Loading screen is going to look like reloading!
IMG:https://media2.giphy.com/media/kdhDcoM9ZLl3TJURfS/giphy.gif


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.
IMG:https://media0.giphy.com/media/ocGO5KZmMnyRQNkljZ/giphy.gif


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.
IMG:https://media4.giphy.com/media/wv4nvmUf5VOErMoVfx/giphy.gif


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

old Blog #6 - Scoreboard

SQ
Moderator Off Offline

Quote
Scoreboard Design

A first new look of the new scoreboard design for mobile.
IMG:https://i.imgur.com/U0rNNyX.png

Quick Looks

You can use short clicks on menu icon to look at scoreboard.
This works just like pressing tab button in original CS2D.
IMG:https://media0.giphy.com/media/G8tl3xXvjNbVdCUHNg/giphy.gif


Game Menu

After scoreboard appears, you can swipe up to open game menu.
While game menu is opened, scoreboard is also displayed.
IMG:https://media3.giphy.com/media/Drrd6ysAwfbYsndJQP/giphy.gif


Game Menu Buttons

You can add additional menu buttons via mods.
IMG:https://media1.giphy.com/media/ezmpODJcd5MeXsKVGG/giphy.gif


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

Facebook Link

Next?
Next Blog is going to be about Hud (Part 2)

old Blog #7 - Hud Indicators

SQ
Moderator Off Offline

Quote
Hud Indicators

Having a minimap on mobile screen is not sufficient.
Therefore, I've replaced it with indicators on edges of the screen.
These indicators shows team positions, mission targets and spotted enemies.
IMG:https://media4.giphy.com/media/RDGi41HuqAGvKsx3c4/giphy.gif?cid=790b7611d094cee457f36a9f2f22fe090ecdf6f7b4a559aa&rid=giphy.gif&ct=g


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

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

Facebook Link

Next?
Next Blog is going to be about Hud Cursor

old Blog #8 - Hud Cursor

SQ
Moderator Off Offline

Quote
Hud Cursor

Mouse cursor has three modes.
Hopefully, we will figure out which is your favorite.

• Collision
• Fixed
• Experimental

Collision Mode

Collides with walls, players & screen borders. However, this results in cursor jumping.
IMG:https://media0.giphy.com/media/66M8uShtfvoFqgGpqk/giphy.gif?cid=790b76113d75f3ab8fdcbc49578e28a5df7bc5e2c3ceb6dc&rid=giphy.gif&ct=g


Fixed Mode

Keeps the same distance from the player.
This feels more consistent, I guess most of people would prefer this setting.
IMG:https://media1.giphy.com/media/E8biRIEbL8g6leceKX/giphy.gif?cid=790b761141bebedd85ad1d6e19fc4d6b2bb237aeadf4e395&rid=giphy.gif&ct=g


Experimental Mode

Combines collision and fixed modes.
IMG:https://media1.giphy.com/media/ovuvqpssgyjJGvztq3/giphy.gif?cid=790b76113f82f7d2a3b144689c0499723b0f9aa8484e7d69&rid=giphy.gif&ct=g


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

Facebook Link

Next?
Next Blog is going to be Mod Support Introduction

old Blog #9 - Mods Support

SQ
Moderator Off Offline

Quote
Mods Support

Server API manages game logics, server commands, player variables, sends data to client API.

Client API manages hud, ui, visuals, sends client commands, receives data from server API.

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


Server Player Variables

Player Variables are variables attached to every player.

Network modes for the variable.
• NoSync - variable shared only within server mods
• Local - client receives only his value (e.g., money)
• All - client receives all players values (e.g., kills, deaths)

1
2
3
4
5
6
7
8
9
10
11
-- server mod (lua)

startKills = 0
playerId = 1
newKills = 2

playerKillsVariable = PlayerVariable.Create("kills", VariableType.Int, startKills, VariableNetwork.All)

playerKillsVariable:Set(playerId, newKills)

kills = playerKillsVariable:Get(playerId)

Player Variables

Client mods cannot create player variables but you can access their values if they are synchronized.
Hooks allows to subscribe to variable changes.

1
2
3
4
5
6
7
8
9
-- client mod (lua)

playerKillsVariable = PlayerVariable.GetByName("kills")

playerKillsVariable:AddHook("KillsChanged")

function KillsChanged(playerId, value)
   -- server has changed player variable
end

Variables

These variables are used to store variables that gameplay depends on.

Network modes for the variable.
• NoSync - variable shared only within server mods
• Sync - value is sent to the client (e.g., round time left)

1
2
3
4
5
6
7
-- server mod (lua)

roundTimeVariable = ServerVariable.Create("roundtime", VariableType.Int, 0, VariableNetwork.Synced)

roundTimeVariable:Set(5)

roundTime = roundTimeVariable:Get()

Hooks for Variables

1
2
3
4
5
6
7
8
9
-- client mod (lua)

roundTimeVariable = ServerVariable.GetByName("roundtime")

roundTimeVariable:AddHook("RoundTimeChanged")

function RoundTimeChanged(value)
   -- server has changed variable
end

Hooks

Hooks behaves the same way they do in original CS2D.
Exception is that they can be called as well.
For very custom mods, you will need to implement your own "startround" hook.

1
2
3
4
5
6
-- server mod (lua)

AddHook("startround", ","func_startround")

-- calls all functions that are subscribed to "startround"
CallHook("startround")

Settings

Settings are custom variables that can be accessed in create server window.
Variables are stored in config files.

1
2
3
-- server mod (lua)

autoteambalance = ServerSetting.Create("autoteambalance", VariableType.Bool, false)

Commands

You can send custom network messages from server to client and vice versa.
Using client commands you can implement client request such as buying, team selection menu.

Client commands can be initialized only by server.

1
2
3
4
5
6
7
8
9
-- server mod (lua)

command_teamselect = ClientCommand.Add("teamselect")

command_teamselect:AddHook("TeamSelect");

function TeamSelect(arguments)
   -- received client command
end

Client mod would use client commands that are created by server.

1
2
3
4
5
6
-- client mod (lua)

command_teamselect = ClientCommand.GetByName("teamselect")

-- select team ct
command_teamselect:Call("2");

Parsing

Console commands are still there to be executed by server mods.

1
2
3
-- server mod (lua)

parse("player_equip 1 30")

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

Facebook Link

Next?
Next Blog is going to be about Buy Menu (mod)
edited 1×, last 16.05.21 05:14:18 pm

old Blog #10 - Buy Menu

SQ
Moderator Off Offline

Quote
Buy Menu

I've chosen to use joysticks for selection to avoid unnecessary hand movement for buying.
This also makes buying quite fast as secondary hand can already prepare for the next movement.
IMG:https://media4.giphy.com/media/6j7dcISVOxZJtU1Ixt/giphy.gif?cid=790b7611001d1b84e2e73cfe957439803b6a1fe5a24e9a48&rid=giphy.gif&ct=g


UI Blur Effect

I've wrote custom UI shader with blur which does make the text more readable.
IMG:https://i.imgur.com/UO7dVeE.png

Player Money Hud

Money is displayed while player is inside the buying zone and buy time is not over.
IMG:https://media4.giphy.com/media/obqLTNPthpVULbhBqY/giphy.gif?cid=790b7611e8fe4cc8da2eaa0ab3d667cf1d12afbffc55bb2d&rid=giphy.gif&ct=g


Info Messages

Warnings needs to be shown somewhere, right?
IMG:https://media1.giphy.com/media/jJQlDNsRR5rLIccH7e/giphy.gif?cid=790b76114ef9350deff36a90046d88b770ef166252e19c8c&rid=giphy.gif&ct=g


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

Facebook Link

Next?
Next Blog is going to be about Spectator View

old Blog #11 - Spectator View

SQ
Moderator Off Offline

Quote
Spectator View

I've been focusing less on the blogs and more on development due to the lack of free time lately.

Additional properties are displayed in spectator view:
• carried items
• ammo of current weapon
• team score
• round time
IMG:https://media1.giphy.com/media/oiFjpOSsa96xJAwQ7V/giphy.gif?cid=790b7611964376bc82789e5424a8d6b3ae38f4f25e9e9f33&rid=giphy.gif&ct=g


Scoreboard & Menu

Peeking at the scoreboard & opening menu from spectator view.
IMG:https://media2.giphy.com/media/Z5jwvz4FvOJqHQmthn/giphy.gif?cid=790b76113126db48ea796e8d49de99fa3d257e44bc67fb6b&rid=giphy.gif&ct=g


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

Facebook Link

Next?
Next Blog is going to be about Team Selection

old Blog #15 - Chat Messages & Selection Wheels

SQ
Moderator Off Offline

Quote
Chat Messages

Chat message typing can be accessed via communication wheel selection.
This selection invokes your default keyboard to open.
Apparently, some of the common emoticons also works, neat.
IMG:https://media4.giphy.com/media/ZiCUFfqcZE0V9EikbE/giphy.gif?cid=790b7611a30c74e690ae4cdd9ffb7423e3c531065bb05dfc&rid=giphy.gif&ct=g


Team Chat

Team messages works just like you would expect.
IMG:https://media4.giphy.com/media/xrsLyYWSs71oDK2L7e/giphy.gif?cid=790b7611d794631cdeb69250108fc4e46e41b53862e88380&rid=giphy.gif&ct=g


Weapon Wheel Improvements

Wheel selection received an overhaul.
Implemented blur system, previously used only for the buy menu.
Selection include additional ammo information.
IMG:https://i.imgur.com/JtduQ6T.png


Communication Wheel

I am not really satisfied on how this looks.
Perhaps, icons are missing?
IMG:https://i.imgur.com/VMLEX02.png


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

Facebook Link

Next?
Next Blog is going to be about Replays View
edited 1×, last 18.07.21 04:10:46 pm

old Blog #16 - Replay View

SQ
Moderator Off Offline

Quote
Replay View

The view is similar to spectator except the top panel is now replaced with timeline and timeline controls.

Controls
• start from the beginning
• start from previous round
• play/stop replay
• start from the next round
• start from the last round

Timeline
• red/blue/gray markers - round ends
• white marker - current time
• skulls - your deaths

IMG:https://i.imgur.com/6imEq9Q.jpeg

Chat & death messages are also displayed while playing recording.
IMG:https://media1.giphy.com/media/iORQkBrwM1In6JP0E3/giphy.gif


Scoreboard works!
Server variable changes are being stored in replays.
IMG:https://media0.giphy.com/media/bZxbKLDvEccWVsiUoP/giphy.gif


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

Facebook Link

Next?
Next Blog is going to be about Items
edited 3×, last 18.07.21 07:38:52 pm
To the start Previous 1 2 Next To the start
Log in to replyGeneral overviewCS2D overviewForums overview