DEV Community: Cem Ugur Karacam

Introduction to quill, a minimal unity ui framework with lua modding support | devlog_0

Cem Ugur Karacam — Sun, 18 Jul 2021 08:10:50 +0000

Motivation

As a developer we craft interface elements and since so many visual element involved in the process, our engine would have a graphical view or tool for help you to handle shapes, color and layout. After that, when you add logical behavior to these elements you have to deal a reference hell.

In unity, visual ui objects can be created in canvas and can be modified via their component. Later you would save those as a prefab and reference them to another component. But at some point, things start to get complicated. Some prefabs may needed on the fly, so Resources would be handful.

But how other engines approach to graphical aspect of creation user interface?

Win Forms have a design editor built in to visual studio BUT it has a XAML option.
Similar to that, android studio has a design tool BUT it has a XML output.
XCode has a design tool BUT now they got SwiftUI.
And there is Flutter and React Native as declerative flow.

So these engines/frameworks has option to drive user interface programming from code.

Returning to unity, when you have a prefab, unity creates a YAML file, but you wouldn't want to mess with it.

Nevertheless, In theory, you would create any gameObject by creating and adding necessary components in runtime. But it would take some effort. At this point, I asked myself, why not create a wrapper api for that?

Recently, I played around with LÖVE2D framework and I love it! You wouldn't believe it how it's easy to setup and draw something to the screen.

Here is a snippet from LÖVE2D. Similar to OnGUI in unity, love.draw will execute block and draw graphic related stuff. It's that easy.
(Also I'm aware of the old IMGUI api, but unity left and moved on with UnityUI).

function love.draw()
    love.graphics.rectangle("fill", 20, 50, 60, 120 )

    love.graphics.setColor(0, 1, 0, 1)
    love.graphics.print("This is a pretty lame example.", 10, 200)
end

There are plenty of example after I researched:

LÖVE2D
LIKO-12
Pixel-Vision(MonoGame based, also uses MoonSharp)
TIC-80
PICO-8
Raylib
Defold
Some MonoGame libraries

So this was the motivation of my how I started to make Quill, a UnityUI wrapper api to create user interface in runtime with lua scripting option. Although its not a pro feature api, its more than a pleasure to spend time with it.

Let's take a look how its going so far.

Quill C# API

Quill's building blocks are just standart UnityUI components.

In Unity, When you create a ui object in a scene, if there is none, it'll create a Canvas and InputSystem object first, then your object goes as a child to Canvas.

So, when Quill initilaze, it'll create a Canvas and InputSystem.

private void Start()
{
    Quill.Init();
}

It would be possible to use any Canvas that exist in the scene or hand crafted prefabs could be nested in Quill's canvas, since it holds a reference for canvas

...
Quill.mainCanvas.sortingOrder = 100;
Quill.mainCanvas.renderMode   = RenderMode.WorldSpace;
...

Elements

* QuillElement (Empty)      //  Wraps RectTransform and provides base functionality
* QuillLabel                //  Derives from Text
* QuillBox                  //  Derives from Image
* QuillButton               //  Derives from Button

private void Start()
{
    Quill.Init();

    var box     = Quill.CreateBox(Color.red);
    Quill.mainRoot.Add(box);
    box.SetSize(200, 200);
    box.SetPosition(50, -50);

    var label   = Quill.CreateLabel("hello world");
    box.root.Add(label);
    label.SetPosition(50, -50);
}

All elements implement IQuillElements so base functionality of RectTransorm is available for each elements.

QuillButton button;

private void Start()
{
    Quill.Init();

    var box = Quill.CreateBox(Color.red);
    Quill.mainRoot.Add(box);
    box.SetSize(300, 300);

    button = Quill.CreateButton("hello button");
    button.box.color = Color.blue;
    box.root.Add(button);

    button.box.SetSize(200, 40);
    button.box.SetPosition(50, -50);
    button.onClick.AddListener(OnButtonClick);

    box.SetPosition(50, -50);
}

private void OnButtonClick()
{
    button.label.text = "this button clicked";
}

And finally, a broadcast option to handle events

//  ScoreManager
int score;
private void Update()
{
    score += 5;
    if (Input.GetKeyDown(KeyCode.Space))
    {
        var data = new MessageData("score");
        data.container.Add("playerName", "John");
        data.container.Add("playerScore", score);
        Quill.message.Post(data);
    }
}

//  ScoreView
QuillLabel scoreLabel;
int currentScore;

private void Start()
{
    scoreLabel = Quill.CreateLabel("score: " + currentScore);
    Quill.message.Register(MessageListener);
}

private void MessageListener(MessageData data)
{
    if (data.id == "score")
    {
        //  handle event
    }
}

Quill Lua API

Lua lang is widely used for as scripting and modding tool in game development. I wanted to explore lua ecosystem and idea of modding unity projects. Thanks to MoonSharp, running lua code is fairly easy.

Lua API is completely optional. After Quill initialization, QuillLua takes step in.

private void Start()
{
    Quill.Init();
    QuillLua.Run();
}

private void Update()
{
    QuillLua.OnUpdate();
}

private void OnDestroy()
{
    QuillLua.Exit();
}

And like Resources folder in Unity there is another special folder StreamingAssets. This folder will be available after built. QuillLua will read all lua files placed in StreamingAssets/LUA directory and these special functions will be called, accordingly.

function OnInit()

end

function OnUpdate(dt)

end

function OnMessage(data)

end

function OnExit()

end

OnMessage callback listens for events dispatched from c# api. Any data added to message data container will be coverted to a lua table

...
var data = new MessageData("on_player_score");
data.container.Add("score", 3);
data.container.Add("player", "cemuka");
Quill.message.Post(data);       //  this is opttional, if scope is lua
QuillLua.MessagePost(data);
...

function OnMessage(data)
    if data.id == "on_player_score" then
        quill.log(data.container.player)
        quill.log(data.container.score)
    end
end

Lua api is a wrapper too, it bridges around Quill and MoonSharp with little required tweaks. This way all components available for lua api.

Here is a complicated example, a button with a label. After click, it will execute clickHandler function. Its label will hide after 3 seconds.

local button        = nil
local timer         = 0
local timerStarted  = false

function cilckHandler()
    button.label.setText("button clicked")
    local buttonColor = button.box.getColor()
    buttonColor.a = 0.3

    button.box.setColor(buttonColor)

    timer = 3
    timerStarted = true
end

function OnInit()

    root    = quill.mainRoot()

    color = {}
    color.r = 0.4
    color.g = 0.8
    color.b = 0.3
    color.a = 1

    button = quill.button("this is a button")
    button.box.setColor(color)
    button.onClick.add(cilckHandler)

    root.addChild(button)

    button.setPosition(20,-200)

end

function OnUpdate(dt)

    if timerStarted then
        timer = timer - dt

        if timer < 0 then
            button.label.hide()

            timerStarted = false;
        end
    end

end

Fonts

After a quick search, I found that you can't load a font directly into unity. Happily you can load installed fonts in OS. That said, if there is no font found, it'll fallback to default font.

Please, let me know if you have further info on this topic.

...
root    = quill.mainRoot()
local firaCode = "Fira Code"
quill.loadFont(firaCode, 24);          

local label1 = quill.label("label1")    -- default font (Arial)
local label2 = quill.label("label2")    -- default font (Arial)
label2.setFont(firaCode)                -- Fira Code

quill.setDefaultFont(firaCode)          -- now default font is Fira Code


local label3 = quill.label("label3")    -- default font (Fira Code)

root.addChild(label1)
root.addChild(label2)
root.addChild(label3)

label1.setPosition(100, -100)
label2.setPosition(100, -150)
label3.setPosition(100, -200)
...

Images

Also another folder QuillLua will look up is StreamingAssets/IMAGE.

...
local box = quill.box()
box.setColor(color)
box.setSize(300, 100)
box.sprite("icons/body.png");
...

You can have full control on sprite creation. 9-Sliced supported.

...
options = {}
options.filterMode = "Point"
options.pivotX = 0.5
options.pivotY = 0.5
options.extrude = 0
options.pixelsPerUnit = 100
options.borderX = 3
options.borderY = 3
options.borderZ = 3
options.borderW = 3


local box = quill.box()
box.setColor(color)
box.setSize(300, 100)
box.sprite("body.png", options);
box.setImageType("Sliced");

root.addChild(box);
box.setPosition(100,-100)
...

Modules

Modules are supported.

-- lib/test.lua
test = {}

function test.greeter()
    quill.log("hello modules")
end

return test

-- main.lua
local module = require("lib/test")

function OnInit()
    module.greeter()
end

Closing words

I love creating and engaging user interfaces, mostly games and tools.

Quill is such an experimental and heavily work in progress project for me. While I'm learning and researching for other modding mature apis (i.e. wow), I'll try to complete other ui components. Besides, I'll start to documenting the api and will post lots of examples.

Thanks for reading, feel free to contribute or ask a question.

https://github.com/cemuka/Quill

Exploring TCP Network in Unity

Cem Ugur Karacam — Sun, 04 Apr 2021 18:50:05 +0000

UPDATE

I also made another project built on Telepathy and MessagePack.

https://github.com/cemuka/Telegraph

Unity TCP Server/Client

I have checked out several network libraries to use with unity. Then I wanted to
make a simple one from scratch.

I found some tutorials and repos along the way and they helped a lot. But mostly, they were too complicated or abstracted. I just needed a dune buggy.

So, I tried my best to keep it simple and lean.

Hope that this project helps you, if you're trying to figure out TCP network in your game.

Why Unity as a Server?

Why would I use unity as a server while dotnet core is great?

Because unity has an editor, scene management, physics, navigation and so on.

Sample

Here is the complete network folder below.

...
Network
└───Message
│   │   Message.cs
│   │   MessageHandler.cs
│   │   MessageSerializeExtensions.cs
│   Client.cs
│   Connection.cs    
│   Server.cs
│   ThreadManager.cs
...

I made a simple chat app to test it.
There are two scenes for each role, Server and Client.

Open up the Server scene.
There is a component created for server to setup and listen ServerApplicationStartup.

using System;
using UnityEngine;

public class ServerApplicationStartup : MonoBehaviour
{
    private Server _server;
    private MessageHandler _handler;

    private void Start()
    {
        _server = new Server(7777);
        _server.Start();
        _server.ClientConnectedEvent    += OnClientConnect;
        _server.MessageReceivedEvent    += OnMessage;
        _server.ClientDisconnectedEvent += OnClientDisconnect;

        _handler = new MessageHandler();
        _handler.AddHandler("chat", HandleChatMessage);
    }

    //  event callbacks
    private void OnClientConnect(int connId)
    {
        var greet = new GreetData()
        {
            id = connId,
            greetMessage = "Server connection success. Welcome to chat."
        };

        var msg = new Message()
        {
            header = "greet",
            body   = greet.Serialize()
        };

        _server.Send(connId, msg.Serialize());
    }

    private void OnMessage(int connId, byte[] data)
    {
        _handler.Handle(data);
    }

    private void OnClientDisconnect(int connId)
    {
        Debug.Log("Client connection lost. connId: " + connId);
    }

    private void OnApplicationQuit()
    {
        _server.Stop();
    }

    //  handlers
    private void HandleChatMessage(byte[] data)
    {
        var chat = data.Deserialize<ChatData>();

        Debug.Log("received chat, author: " + chat.author);

        var msg = new Message()
        {
            header = "chat",
            body = data
        };

        _server.SendAll(msg.Serialize());
    }
}

For the client scene I created some ui elements.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ClientApplicationStartup : MonoBehaviour
{
    public string ip = "127.0.0.1";
    public int port = 7777;
    public Transform canvasParent;
    public GameObject loginPrefab;
    public GameObject chatPrefab;

    private string _clientNickname;
    private ChatPanel _chatPanel;

    private Client _client;
    private MessageHandler _handler;

    private void Start()
    {
        var login = Instantiate(loginPrefab, canvasParent).GetComponent<LoginPanel>();
        login.inputField.onEndEdit.AddListener(input => _clientNickname = input );
        login.connectButton.onClick.AddListener(() => Connect());
    }

    private void CreateChatPanel()
    {
        _chatPanel = Instantiate(chatPrefab, canvasParent).GetComponent<ChatPanel>();
        _chatPanel.chatLogText.text = "";
        _chatPanel.inputField.onEndEdit.AddListener(OnChatInput);
        _chatPanel.inputField.ActivateInputField();
    }

    private void Connect()
    {
        CreateChatPanel();

        _client = new Client();
        _client.Start(ip, port);
        _client.OnMessageReceived   += MessageReceived;

        _handler = new MessageHandler();
        _handler.AddHandler("chat",     HandleChatMessage);
        _handler.AddHandler("greet",    GreetHandleMessage);
    }

    //  event callbacks
    private void MessageReceived(byte[] msg)
    {
        _handler.Handle(msg);
    }

    private void OnChatInput(string input)
    {
        if (!string.IsNullOrEmpty(input) && !string.IsNullOrWhiteSpace(input))
        {
            var chat = new ChatData()
            {
                author = _clientNickname,
                entry  = input
            };

            var msg = new Message()
            {
                header = "chat",
                body   = chat.Serialize()
            };

            _client.Send(msg.Serialize());

            _chatPanel.inputField.text = "";
            _chatPanel.inputField.ActivateInputField();
        }
    }

    private void OnApplicationQuit()
    {
        _client.Disconnect();
    }

    //  handlers
    private void HandleChatMessage(byte[] data)
    {
        var chat = data.Deserialize<ChatData>();
        _chatPanel.AddLog(chat.author + ": " + chat.entry);
    }

    private void GreetHandleMessage(byte[] data)
    {
        var greet = data.Deserialize<GreetData>();
        _chatPanel.AddLog(greet.greetMessage);
        _chatPanel.AddLog("Connection id: " + greet.id);
    }
}

Finally, ThreadManager is responsible for executing on main thread.
Further info here,
https://stackoverflow.com/questions/41330771/use-unity-api-from-another-thread-or-call-a-function-in-the-main-thread

Here is the complete project.

Closing words

When I search for this topic, I saw so much discussion about unity,
old and new unity network stack and it's server capabilities.

Also, in this forum thread, Joachim Ante(CTO, Unity) gives detailed answers to some good questions.

https://forum.unity.com/threads/dots-netcode-for-mmorpg.867463/

At this point, would I use a custom homebrew server from scratch in my in-production game?

Well if I need to fill my custom needs, I would bet my money on Telepathy and it's aproach to solve unity bounds and
battle tested codebase. Here some detailed info on this topic from the author,
https://mirror-networking.com/apathy/
https://github.com/vis2k/Telepathy

Referenced resources

Telepathy
SimpleUnityTCP
Tom Weiland unity network series
Facepunch.Steamworks

Create an Item Editor with UI Elements without uss and uxml in Unity

Cem Ugur Karacam — Sat, 27 Feb 2021 13:22:55 +0000

So you wanna do some editor scripting?

I've been following UI Elements since its preview release. Often, I tried from their
examples repo but couldn't dig in so much and this time I'll make a little editor tool walkthrough.

UI Elements

UI Elements is the new kid in town for Unity developers. I give it a go their Recently released some official beginner resources here but I didn't like that uss and uxml stuff. Since I kinda wanted 'database-like editor tool' to hack and learn this, I'll stick with C# Api this time.

Here is the final product.

If you wanna move along, grab the code here.

Editor window
Layout with styles
Add a scroll view
Add fields
Save to json

1. Editor window

This part is familiar, create a folder Editor make a script, I'll say ItemEditor and hook up your editor window with MenuItem attribute.

using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;

public class ItemEditor : EditorWindow
{
    [MenuItem("Tools/Item Editor")]
    public static void OpenWindow()
    {
        var window = GetWindow<ItemEditor>();
        window.titleContent = new GUIContent("Item Editor");
    }
}

Nothing fancy, new menu will pop up in the editor you'll get a fresh empty window.
Next, draw some boxes.

2. Layout with styles

OnEnable call is entry point for my little editor. I'll draw a box for listing items, and another to hold fields for adding a new item.

private void OnEnable()
{
    var root = this.rootVisualElement;

    var itemsListBox = new Box();
    var newItemBox = new Box();

    root.Add(itemsListBox);
    root.Add(newItemBox);
}

Well, if you look your window again, you won't see anything. So this is where layout involves.
I'll divide my window as 1 portion for list, 3 portion for new item section.

private void OnEnable()
{
    var root = this.rootVisualElement;
    root.style.flexDirection = FlexDirection.Row;

    var itemsListBox = new Box();
    itemsListBox.style.flexGrow = 1f;
    itemsListBox.style.flexShrink = 0f;
    itemsListBox.style.flexBasis = 0f;
    itemsListBox.style.flexDirection = FlexDirection.Column;

    var newItemBox = new Box();
    newItemBox.style.flexGrow = 3f;
    newItemBox.style.flexShrink = 0f;
    newItemBox.style.flexBasis = 0f;

    root.Add(itemsListBox);
    root.Add(newItemBox);
}

First of all, if you haven't heard about flex css like me before,
it may be a good idea to look at how it works, since it uses a flex engine under the hood.

Now I can see my boxes.

https://docs.unity3d.com/Manual/UIE-LayoutEngine.html

And this is the resource that helped me to understand flex.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Yeah, mo more StartHorizontal or other IMGUI method for layout your window. You won't need OnGUI at all.

3. Add a scroll view

It's so simple, like adding a box I did above.

private ScrollView _scrollView;

private void SetupItemList(Box parent)
{
    _scrollView = new ScrollView();
    _scrollView.showHorizontal = false;
    _scrollView.style.flexGrow = 1f;
    parent.Add(_scrollView);
}

Also, a label fits good.

private void SetupItemList(Box parent)
{
    var listLabel = new Label("Item List");
    listLabel.style.alignSelf = Align.Center;
    listLabel.style.unityFontStyleAndWeight = FontStyle.Bold;
    parent.Add(listLabel);

    _scrollView = new ScrollView();
    _scrollView.showHorizontal = false;
    _scrollView.style.flexGrow = 1f;
    parent.Add(_scrollView);
}

4. Add fields

Let's populate other box with some fields.
Name, rarity and price is simple enough for my little tool.

private void SetupFields(Box parent)
{
    var newItemLabel = new Label("New Item");
    newItemLabel.style.alignSelf = Align.Center;
    newItemLabel.style.unityFontStyleAndWeight = FontStyle.Bold;
    parent.Add(newItemLabel);

    var nameField = new TextField("Name: ");
    var rarityField = new EnumField("Rarity: ", ItemRarity.Common);
    var priceField = new IntegerField("Price: ");
    parent.Add(nameField);
    parent.Add(rarityField);
    parent.Add(priceField);

    var saveItemButton = new Button();
    saveItemButton.text = "Save Item";
    parent.Add(saveItemButton);
}

Now, I'll create a method for adding items to my scroll view list and when I click
to save item button, it'll get values from fields.

private void CreateListItem(string name)
{
    var itemElement = new VisualElement();
    itemElement.style.flexDirection = FlexDirection.Row;
    itemElement.focusable = true;
    itemElement.name = name;

    var remove = new Button();
    remove.text = "-";
    itemElement.Add(remove);

    var nameButton = new Button();
    nameButton.text = name;
    nameButton.style.flexGrow = 1f;
    itemElement.Add(nameButton);

    _scrollView.contentContainer.Add(itemElement);
}

I create an empty visual element and afterwards, I add it to scroll view as a whole.
Pretty clean looking and easy comparing between IMGUI api.

Next, I'll create a class ItemData.

[System.Serializable]
public class ItemData
{
    public int id;
    public string name;
    public ItemRarity rarity;
    public int price;
}

Now I can save my item when I hit to save button.

private List<ItemData> _savedItems = new List<ItemData>();

private void SetupFields(Box parent)
{
    var newItemLabel = new Label("New Item");
    newItemLabel.style.alignSelf = Align.Center;
    newItemLabel.style.unityFontStyleAndWeight = FontStyle.Bold;
    parent.Add(newItemLabel);

    var nameField = new TextField("Name: ");
    var rarityField = new EnumField("Rarity: ", ItemRarity.Common);
    var priceField = new IntegerField("Price: ");
    parent.Add(nameField);
    parent.Add(rarityField);
    parent.Add(priceField);

    var saveItemButton = new Button();
    saveItemButton.text = "Save Item";
    saveItemButton.clicked += () => {
        if (string.IsNullOrWhiteSpace(nameField.value) == false)
        {
            var item = new ItemData();
            item.id = new Guid().GetHashCode();
            item.name = nameField.value;
            item.rarity = (ItemRarity)rarityField.value;
            item.price = priceField.value;

            _savedItems.Add(item);

            //  set default values to clear fields
            nameField.value = "";
            rarityField.value = ItemRarity.Common;
            priceField.value = 0;

            CreateListItem(item.name);
        }
    };

    parent.Add(saveItemButton);
}

And, I'll add a couple test items. It works!

5. Save to json

Finally I should be able to save and load my data. I'll save my items as a json file in Resources folder.

To handle my json data, I'll create a class and JsonUtility will do the magic.

public class ItemsFile
{
    public List<ItemData> data;
}

public void LoadData()
{
    var path = Application.dataPath + "/Resources/items.json";

    if (System.IO.File.Exists(path))
    {
        var file = System.IO.File.ReadAllText(path);
        _savedItems = JsonUtility.FromJson<ItemsFile>(file).data;

        foreach (var item in _savedItems)
        {
            CreateListItem(item.name);
        }
    }
}

public void SaveData()
{
    var path = Application.dataPath + "/Resources/items.json";

    var itemsFile = new ItemsFile();
    itemsFile.data = new List<ItemData>(_savedItems);
    var itemsFileAsJson = JsonUtility.ToJson(itemsFile);
    System.IO.File.WriteAllText(path, itemsFileAsJson);
}

Just load when window opens and save when you hit save button.
Now I have a working sharp looking item editor tool that save data as json.

As a final touch, I'll add removing an item from my list.

private void CreateListItem(ItemData itemData)
{
    var itemElement = new VisualElement();
    itemElement.style.flexDirection = FlexDirection.Row;
    itemElement.focusable = true;

    var remove = new Button();
    remove.text = "-";
    remove.clicked += () => {
        _scrollView.contentContainer.Remove(itemElement);
        _savedItems.Remove(itemData);
        SaveData();
    };
    itemElement.Add(remove);

    var nameButton = new Button();
    nameButton.text = itemData.name;
    nameButton.style.flexGrow = 1f;
    itemElement.Add(nameButton);

    _scrollView.contentContainer.Add(itemElement);
}

That's all for now.
UI Elements proved me that it's better aproach than
legacy editor scripting and I'll enjoyed without uss and uxml so far :)

If you missed above, grab the code here.

Do you like styling and this flex styling in unity? Let me know what do you think.

Thanks for reading!

Download Images From a Url Endpoint in Runtime with Unity

Cem Ugur Karacam — Fri, 06 Dec 2019 21:50:56 +0000

In this tutorial, we will make a GET HTTP method to download an image and use it in the scene. I'll use this 600x600 image from JSONPlaceholder .

First, making a client. Create a script Client.

using UnityEngine;
using UnityEngine.Networking;
using System.Collections;

public class Client : MonoBehaviour
{
    IEnumerator GetTextureRequest(string url)
    {
        using(var www = UnityWebRequestTexture.GetTexture(url))
        {
            yield return www.SendWebRequest();

            if (www.isNetworkError || www.isHttpError)
            {
                Debug.Log(www.error);
            }
            else
            {
                if (www.isDone)
                {
                  //handle the result
                }
            }
        }
      }
}

To make a GET request we need to use UnityEngine.Networking namespace. But, our goal is specifically downloading an image in runtime, unity has some useful api to handle this work. Remaining work is easy, making a sprite from this downloaded texture. Further info on DownloadHandlerTexture here.

using UnityEngine;
using UnityEngine.Networking;
using System.Collections;

public class Client : MonoBehaviour
{
    IEnumerator GetTextureRequest(string url, System.Action<Sprite> callback)
    {
        using(var www = UnityWebRequestTexture.GetTexture(url))
        {
            yield return www.SendWebRequest();

            if (www.isNetworkError || www.isHttpError)
            {
                Debug.Log(www.error);
            }
            else
            {
                if (www.isDone)
                {
                    var texture = DownloadHandlerTexture.GetContent(www);
                    var rect = new Rect(0, 0, 600f, 600f);
                    var sprite = Sprite.Create(texture,rect,new Vector2(0.5f,0.5f));
                    callback(sprite);
                }
            }
        }
      }
}

I've added a second parameter to the method, because since unity coroutines can't return a type, I'll use an Action as a callback here.

To make a sprite, Sprite class provides a Create method that takes a Texture2D argument as the source of sprite, a Rect argument to configure dimensions and a Vector2 to define pivot point for the sprite.

To make it visible on the screen, I need a Sprite object in the scene and a reference it's SpriteRenderer to pass downloaded sprite.

To complete the Client let's call the coroutine in Start.

using UnityEngine;
using UnityEngine.Networking;
using System.Collections;

public class Client : MonoBehaviour
{
    public SpriteRenderer spriteRenderer;

    private Sprite targetSprite;
    private string url = "https://via.placeholder.com/600/92c952";

    private void Start() 
    {
        StartCoroutine(GetTextureRequest(url, (response) => {
            targetSprite = response;
            spriteRenderer.sprite = targetSprite;
        })); 
    }   

    IEnumerator GetTextureRequest(string url, System.Action<Sprite> callback)
    {
        using(var www = UnityWebRequestTexture.GetTexture(url))
        {
            yield return www.SendWebRequest();

            if (www.isNetworkError || www.isHttpError)
            {
                Debug.Log(www.error);
            }
            else
            {
                if (www.isDone)
                {
                    var texture = DownloadHandlerTexture.GetContent(www);
                    var rect = new Rect(0, 0, 600f, 600f);
                    var sprite = Sprite.Create(texture,rect,new Vector2(0.5f,0.5f));
                    callback(sprite);
                }
            }
        }
      }
}

Now, I need some objects in the scene.

Create a Sprite in Hierarchy.

Next, create another object for Client and make sure that referencing Sprite object's renderer to Client.

Now it's good to go. Hit to play!

Consider that, it may consume some processing power for multiple files. Here is my profiler result for this single image:

Making a REST service using Node and Express to use with Unity - Part 4

Cem Ugur Karacam — Sun, 10 Nov 2019 22:46:49 +0000

So far, we have managed to receive and send data between nodejs server and unity client. But it was limited to display only on console. This part, I'd like to build some GUI stuff to make it more pleasing to look at! Unity ninjas love to make some GUI stuff after all 😎.

I love Scriptable Objects in Unity. If you missed or dodged it, check out my completed series about MVC with Scriptable Objects in Unity.

For this part, I'll make a list view that contains enemies and a form-like GUI to push a new item to the server.

ScrollView
EnemyView
EnemyFormView

I love Kenney's art and his free assets. For the images, I'll use this free package.

First, split the screen. Put some labels to identify each panel. I'll use this free font.

Build ScrollView

We have built-in ScrollView component in unity, this one is easy-peasy-lemon squeezy 🤡.

I've deleted the Scrollbar Horizontal object from Scroll View and disabled horizontal scrolling since we don't need it.

Next, I need to make a view for enemies. ScrollView has a Content object, as its name suggests, it contains and makes scrollable visualisation automatically. But there is a component that handles view constraints, Vertical Layout Group.

The content object will have EnemyViews as child objects and they'll show up and behave scrollable according to Vertical Layout constraints(like spacing, padding and size).

Build EnemyView

To make it I'll create an Image(I'll name it as EnemyView) object in content and I'll place necessary UI objects for enemy attributes as children.

Here I have the EnemyView. Since it's not complicated, I'll skip the detailed UI creation parts.

Next, create a script that holds references to this view, EnemyView.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class EnemyView : MonoBehaviour
{
    public Text idText;
    public Text nameText;
    public Text healthText;
    public Text attackText;

    public void InitView(Enemy enemy)
    {
        idText.text = enemy.id.ToString();
        nameText.text = enemy.name;
        healthText.text = enemy.health.ToString();
        attackText.text = enemy.attack.ToString();
    }
}

Now attach the EnemyView script to EnemyView GameObject in the hierarchy, assign elements and save it as prefab. After that, it's okay to delete it from the scene.

Build EnemyFormView

I'll use InputField UI objects for this.

Don't forget to set Content Type for health and attack input fields to integer.

Next, create EnemyFormViev.

using UnityEngine;
using UnityEngine.UI;

public class EnemyFormView : MonoBehaviour 
{
    public InputField nameField;
    public InputField healthField;
    public InputField attackField;
    public Button createButton;

    public void InitFormView(System.Action<EnemyRequestData> callback)
    {
        createButton.onClick.AddListener(()=>{
                OnCreateClicked(callback);
            }
        );
    }

    public void OnCreateClicked(System.Action<EnemyRequestData> callback)
    {
    }

}

EnemyRequestData is a data holder class to contain info before we make a post request. I'll define this class in Enemy.cs.

[System.Serializable]
public class Enemy
{
    public int id;
    public string name;
    public int health;
    public int attack;
}

public class EnemyRequestData
{
    public string name;
    public int health;
    public int attack;

    public EnemyRequestData(string name, int health, int attack)
    {
        this.name = name;
        this.health = health;
        this.attack = attack;
    }
}

If the user provides valid info we'll make an EnemyRequestData and responsible class will handle the rest of the work.

using UnityEngine;
using UnityEngine.UI;

public class EnemyFormView : MonoBehaviour 
{
    public InputField nameField;
    public InputField healthField;
    public InputField attackField;
    public Button createButton;

    public void InitFormView(System.Action<EnemyRequestData> callback)
    {
        createButton.onClick.AddListener(()=>{
                OnCreateClicked(callback);
            }
        );
    }

    public void OnCreateClicked(System.Action<EnemyRequestData> callback)
    {
        if (InputsAreValid())
        {
            var enemy = new EnemyRequestData(

                nameField.text,
                int.Parse(healthField.text),
                int.Parse(attackField.text)
            );

            callback(enemy);
        }
        else
        {
            Debug.LogWarning("Invalid Input");
        }
    }

    private bool InputsAreValid()
    {
        return (string.IsNullOrEmpty(nameField.text) || 
            string.IsNullOrEmpty(healthField.text) || 
            string.IsNullOrEmpty(healthField.text) );
    }
}

Attach this component to EnemyFormView object in the scene and assign objects.

Time to create a prefab for each view

GUI stuff is ready! I need to wire up with some logic. More to do:

A Database for enemies
A controller for view and data

Enemy Database

EnemyDatabase will use Scriptable Object magic. Thus, it'll allow us to create data assets, so data can be persisted. That would be a life savior in a lot of circumstances in unity, for example, using the data in different scenes effortlessly, assigning from editor easily or ability to work with the inspector.

Create a script named EnemyDatabase.

using UnityEngine;
using System.Collections.Generic;

[CreateAssetMenu]
public class EnemyDatabase : ScriptableObject 
{
    [SerializeField]
    private List<Enemy> database = new List<Enemy>();

    public List<Enemy> GetEnemies() => database;

    public void Add(Enemy enemy)
    {
        database.Add(enemy);
    }

    public void ClearInventory()
    {
        database.Clear();
    }
}

SerializeField attribute allows it to serialize unity with private variables from editor. I want to inspect from the editor and restrict access to all.

Controller

Before moving further, I have to refine and change some parts of our project I have done earlier.

In ClienApi.cs I have two methods Get and Post that responsible for making http requests. They are using Coroutines that part of UnityEngine and they don't have a proper return type. A workaround to use it just passing an Action<T> as a parameter.

So I'll modify these methods to return a json string and the controller will process the json parsing and creating Enemy information to display in Views.

Let's modify the get method in ClientApi.cs

    public void GetRequest(string url, System.Action<string> callback)
    {
        StartCoroutine(Get(url,callback));
    }

    private IEnumerator Get(string url, System.Action<string> callback)
    {
        using(UnityWebRequest www = UnityWebRequest.Get(url))
        {
            yield return www.SendWebRequest();

            if (www.isNetworkError)
            {
                Debug.Log(www.error);
            }
            else
            {
                if (www.isDone)
                {
                    //handle result
                    var result = System.Text.Encoding.UTF8.GetString(www.downloadHandler.data); 
                    //format json to be able to work with JsonUtil 
                    result = "{\"result\":" + result + "}"; 

                    callback(result);
                }
                else
                {
                    //handle the problem
                    Debug.Log("Error! data couldn't get.");
                }
            }
        }
    }

I could grab the result with this trick now. Same for the post method.

    public void PostRequest(string url, EnemyRequestData data, System.Action<string> callback)
    {
        StartCoroutine(Post(url,data,callback));
    }

    private IEnumerator Post(string url, EnemyRequestData data, System.Action<string> callback)
    {
        var jsonData = JsonUtility.ToJson(data);
        Debug.Log(jsonData);
        using(UnityWebRequest www = UnityWebRequest.Post(url, jsonData))
        {
            www.SetRequestHeader("content-type", "application/json");
            www.uploadHandler.contentType = "application/json";
            www.uploadHandler = new UploadHandlerRaw(System.Text.Encoding.UTF8.GetBytes(jsonData));
            yield return www.SendWebRequest();

            if (www.isNetworkError)
            {
                Debug.Log(www.error);
            }
            else
            {
                if (www.isDone)
                {
                    // handle the result
                    var result = System.Text.Encoding.UTF8.GetString(www.downloadHandler.data);  
                    result = "{\"result\":" + result + "}"; 

                    callback(result);
                }
                else
                {
                    //handle the problem
                    Debug.Log("Error! data couldn't get.");
                }
            }
        }
    }

Now I'll modify the app.js on the server side. I'll add a small package for id generation called shortid. Let's navigate to folder and npm install shortid. This way, the server will generate the id.

const express = require('express');
const id = require('shortid');
const app = express();
app.use(express.json());

app.get('/', (req, res) => {
    res.send('Hello Unity Developers!');
});

let enemies = [
    {
        "id": id.generate(),
        "name": "orc",
        "health": 100,
        "attack": 25
    },
    {
        "id": id.generate(),
        "name": "wolf",
        "health": 110,
        "attack": 25
    }
];

app.get('/enemy', (req, res) => {
    res.send(enemies);
});

app.post('/enemy/create', (req, res) => {
    let newEnemy = {
        "id": id.generate(),
        "name": req.body.name,
        "health": req.body.health,
        "attack": req.body.attack
    };

    enemies.push(newEnemy);
    console.log(enemies);
    res.send(enemies);
});

app.listen(3000, () => console.log('started and listening on localhost:3000.'));

console.log(enemies);

So far so good.

Before the test, I need to complete Controller. Controller will create GUI, initialize views, and responsible for requests.

public class Controller : MonoBehaviour
{
    public Transform canvasParent;
    public ClientApi client;

    private Transform contentParent;
    private EnemyFormView formView;

    private void Start()
    {
        CreateListView();
        CreateFormView();
    }

    private void CreateFormView()
    {
        var formPanelPrefab = Resources.Load("Prefabs/EnemyFormPanel");
        var formPanelGO = Instantiate(formPanelPrefab, canvasParent) as GameObject;
        formView = formPanelGO.GetComponent<EnemyFormView>();
        formView.InitFormView(SendCreateRequest);
    }

    private void CreateListView()
    {
        var listPanelPrefab = Resources.Load("Prefabs/EnemyListPanel");
        var listPanelGO = Instantiate(listPanelPrefab, canvasParent) as GameObject;
        contentParent = listPanelGO.GetComponentInChildren<ScrollRect>().content;
    }

    private void SendCreateRequest(EnemyRequestData data)
    {
        client.PostRequest(client.postUrl, data, result => {
            Debug.Log(result);
            });
    }
}

The first step for creating GUI. on Start we create both panels, initialize EnemyFormView and passing SendCreateRequest as a callback when Create button clicked. Last, to do to complete the first step of controller, assign client and Canvas parent in the scene.

Before second step, let's test it out.

node app.js to start the server.

Hit play on unity, afterward. I'll try form with a true nemesis, Balrog 👾

Seems ninja enough to me 😎

Second part of the controller is getting data to the client's own database and injecting to view.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Controller : MonoBehaviour
{
    public Transform canvasParent;
    public ClientApi client;
    public EnemyDatabase enemyDatabase;

    private Transform contentParent;
    private GameObject enemyViewPrefab;
    private EnemyFormView formView;

    private void Start()
    {
        CreateListView();
        CreateFormView();
        enemyViewPrefab = Resources.Load<GameObject>("Prefabs/EnemyView");

        RequestEnemies();
    }

    private void CreateFormView()
    {
        var formPanelPrefab = Resources.Load("Prefabs/EnemyFormPanel");
        var formPanelGO = Instantiate(formPanelPrefab, canvasParent) as GameObject;
        formView = formPanelGO.GetComponent<EnemyFormView>();
        formView.InitFormView(SendCreateRequest);
    }

    private void CreateListView()
    {
        var listPanelPrefab = Resources.Load("Prefabs/EnemyListPanel");
        var listPanelGO = Instantiate(listPanelPrefab, canvasParent) as GameObject;
        contentParent = listPanelGO.GetComponentInChildren<ScrollRect>().content;
    }  

    private void SendCreateRequest(EnemyRequestData data)
    {
        client.PostRequest(client.postUrl, data, result => {
            Debug.Log(result);
            });
    }

    private void RequestEnemies()
    {
        client.GetRequest(client.getUrl, result => {
            Debug.Log(result);
            OnDataRecieved(result);
        });
    }

    private void OnDataRecieved(string json)
    {
        var recievedEnemies = JsonHelper.FromJson<Enemy>(json);
        enemyDatabase.ClearInventory();

        foreach (var enemy in recievedEnemies)
        {
            enemyDatabase.Add(enemy);
        }
    }
}

Here, I've defined a method named OnDataRecieved and it takes a string parameter. This method works like an event that will fire up when a response received from the server and it will populate the database with received data.

Now create a new database file in the assets folder and assign it to Controller.

Let's try this new database in the editor.

If you select the asset, you'll see the enemies received from the server. So, If I Instantiate EnemyViews after database populated, it should work.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Controller : MonoBehaviour
{
    public Transform canvasParent;
    public ClientApi client;
    public EnemyDatabase enemyDatabase;

    private Transform contentParent;
    private GameObject enemyViewPrefab;
    private EnemyFormView formView;

    private List<EnemyView> enemyViews = new List<EnemyView>();

    private void Start()
    {
        CreateListView();
        CreateFormView();
        enemyViewPrefab = Resources.Load<GameObject>("Prefabs/EnemyView");

        RequestEnemies();
    }

    private void CreateFormView()
    {
        var formPanelPrefab = Resources.Load("Prefabs/EnemyFormPanel");
        var formPanelGO = Instantiate(formPanelPrefab, canvasParent) as GameObject;
        formView = formPanelGO.GetComponent<EnemyFormView>();
        formView.InitFormView(SendCreateRequest);
    }

    private void CreateListView()
    {
        var listPanelPrefab = Resources.Load("Prefabs/EnemyListPanel");
        var listPanelGO = Instantiate(listPanelPrefab, canvasParent) as GameObject;
        contentParent = listPanelGO.GetComponentInChildren<ScrollRect>().content;
    }  

    private void SendCreateRequest(EnemyRequestData data)
    {
        client.PostRequest(client.postUrl, data, result => {
            Debug.Log(result);
            OnDataRecieved(result);
            });
    }

    private void RequestEnemies()
    {
        client.GetRequest(client.getUrl, result => {
            Debug.Log(result);
            OnDataRecieved(result);
        });
    }

    private void OnDataRecieved(string json)
    {
        var recievedEnemies = JsonHelper.FromJson<Enemy>(json);
        enemyDatabase.ClearInventory();

        foreach (var enemy in recievedEnemies)
        {
            enemyDatabase.Add(enemy);
        }

        CreateEnemyViews();
    }

    private void CreateEnemyViews()
    {
        var currentEnemies = enemyDatabase.GetEnemies();

        //destroy old views
        if (enemyViews.Count > 0)
        {
            foreach (var enemy in enemyViews)
            {
                Destroy(enemy.gameObject);
            }
        }

        //create new enemy views
        foreach (var enemy in currentEnemies)
        {
            var enemyViewGO = Instantiate(enemyViewPrefab, contentParent) as GameObject;
            var enemyView = enemyViewGO.GetComponent<EnemyView>();
            enemyView.InitView(enemy);
            enemyViews.Add(enemyView);
        }
    }
}

I've defined a new list to keep track of EnemyViews on GUI. Lastly, I've defined a new method CreateEnemyViews to get data from the database, destroy old enemy views and create current ones. With these changes, the last part of Controller has completed.

Time to final test.

I've never seen anything cool like this. We made it! I can't believe ninjas, it works charmlessly!

Well, maybe it's not the best without error checks, security considerations, no auth, no remove option and many more. But I hope that I've demonstrated a bit of how it could be implemented with unity as a client.

It could be more easy to make it on video but I think this part is the last chapter of this blog series, sadly.

Project on Github.

Cheers!

MVC in Unity with Scriptable Objects Part 3

Cem Ugur Karacam — Thu, 24 Oct 2019 15:32:54 +0000

Here is the last part of the MVC project.

I've tried to make a schema to illustrate the workflow of MVC in unity.

In a unity app, MonoBehaviour objects live in a scene, so you could see what objects in the hierarchy. But these objects can't communicate with each other directly. MVC pattern in unity is a useful solution to that problem.

Let's try to write it simply:

User input --> Controller -----createView(ModelData)-----> View -----display(ModelData)

First, we wait for input from the user like a button click. Next, the Controller provides the view(as prefab in project) and what model needed to pass to be able to display in this view. Then, Controller instantiates the View and creates it in the scene with the data provided from the Controller. Now, View is ready and holds references for UI objects, passes data to those references to be displayed.

Let's make it in unity from where we left.

I'll work on the view first. I'll create a panel that contains uGUI objects.

We have a panel and an Image for item icon, three text objects for name, type and attack power, respectively. To hold a reference for these objects, create a class in the project, InfoView, add to InfoView object in the scene.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class InfoView : MonoBehaviour
{
    public Image icon;
    public Text nameText;
    public Text typeText;
    public Text attackText;
}

Next, let's add an init method to pass info to those references.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class InfoView : MonoBehaviour
{
    public Image icon;
    public Text nameText;
    public Text typeText;
    public Text attackText;

    public void Init(ItemData data)
    {
        icon.sprite = data.icon;
        nameText.text = data.name;
        attackText.text = "Attack Power: " + data.attack;

        switch (data.type)
        {
            case ItemType.Axe: typeText.text    = "Type: Axe"; break;
            case ItemType.Dagger: typeText.text = "Type: Dagger"; break;
            case ItemType.Hammer: typeText.text = "Type: Hammer"; break;
            case ItemType.Potion: typeText.text = "Type: Potion"; break;
        }
    }
}

Then, assign UI objects in the editor.

It's ready to make a prefab for this view. I'll make a folder as Resources. This is a special folder that unity has an access API to this specific folder. Place this prefab in Resources.

I've organized my project folders a bit. Now all prefabs in my Resources folder and I can access via API.

Since I will Instantiate view prefabs, delete InfoView from scene.--

Time to open Controller.

I'll make a public Transform to point who is going to be the parent of this view, and a private variable to store a reference to ViewInfo at start.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ItemViewController : MonoBehaviour
{
    public Inventory inventoryHolder;
    public Transform inventoryViewParent;
    public Transform infoViewParent;

    private GameObject infoViewPrefab;
    private GameObject itemViewPrefab;

    private void Start() 
    {
        itemViewPrefab = (GameObject)Resources.Load("Item");
        infoViewPrefab = (GameObject)Resources.Load("InfoView");
    }
}

Create a method to instantiate view into the scene.

private void CreateInfoView(ItemData data)
{
var infoGO = GameObject.Instantiate(infoViewPrefab, infoViewParent);
infoGO.GetComponent<InfoView>().Init(data);
}

I'll give this method to ItemView in InitItem , you guessed right thanks to Action<> in c#. Let's modify a bit ItemView to achieve that.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ItemView : MonoBehaviour
{
    public Button button;
    public Image itemIcon;

    private ItemData itemData;

    public void InitItem(ItemData item, Action<ItemData> callback)
    {
        this.itemData = item;
        itemIcon.sprite = itemData.icon;

        button.onClick.AddListener(() => callback(itemData) );
    }
}

So here, I've added a parameter more to pass a method.

Now I can wire up in the controller.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ItemViewController : MonoBehaviour
{
    public Inventory inventoryHolder;
    public Transform inventoryViewParent;
    public Transform infoViewParent;

    private GameObject infoViewPrefab;
    private GameObject itemViewPrefab;

    private void Start() 
    {
        itemViewPrefab = (GameObject)Resources.Load("Item");
        infoViewPrefab = (GameObject)Resources.Load("InfoView");

        foreach (var item in inventoryHolder.inventory)
        {
            var itemGO = GameObject.Instantiate(itemViewPrefab, inventoryViewParent);
            itemGO.GetComponent<ItemView>().InitItem(item, CreateInfoView);
        }
    }

    private void CreateInfoView(ItemData data)
    {
        var infoGO = GameObject.Instantiate(infoViewPrefab, infoViewParent);
        infoGO.GetComponent<InfoView>().Init(data);
    }
}

At Start, I populate inventory with items, and when you click items, CreateInfoView fires up. But before testing it out, I saw a problem here. Controller doesn't know if there is an InfoView created before we click. Let's check before Instatiate.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ItemViewController : MonoBehaviour
{
    public Inventory inventoryHolder;
    public Transform inventoryViewParent;
    public Transform infoViewParent;

    private GameObject infoViewPrefab;
    private GameObject itemViewPrefab;

    private GameObject infoView;

    private void Start() 
    {
        itemViewPrefab = (GameObject)Resources.Load("Item");
        infoViewPrefab = (GameObject)Resources.Load("InfoView");

        foreach (var item in inventoryHolder.inventory)
        {
            var itemGO = GameObject.Instantiate(itemViewPrefab, inventoryViewParent);
            itemGO.GetComponent<ItemView>().InitItem(item, CreateInfoView);
        }
    }

    private void CreateInfoView(ItemData data)
    {
        if (infoView != null)
        {
            Destroy(infoView);
        }

        infoView = GameObject.Instantiate(infoViewPrefab, infoViewParent);
        infoView.GetComponent<InfoView>().Init(data);
    }
}

Here, I've made a variable infoView, and when I try to make a new InfoView in the scene, first, I check if there is any.

Now time to give it a go.

Hit to play.

It seems we made it!

Project on github.

This was a gentle intro to MVC in unity with Scriptable Objects. But I believe it could be implemented like this way to any project. Especially, when receiving REST calls in unity, this pattern could be a life-saving pattern to keep your code organized and scaleable. In unity, it could be a challenge to maintain your objects and communicating them via code. Some may argue with the best solution could be Singletons. They're right, this is not the only way, but a good one.

I think it could be possible to live without design patterns as well, but I'm sure that would be no different from medieval :)

Anyway, since this series completed, I suggest you check my other series using MVC and Scriptable Objects as well: Making a REST service using Node and Express to use with Unity.

Happy coding unity ninjas!

Completed Hacktoberfest!

Cem Ugur Karacam — Thu, 24 Oct 2019 09:18:48 +0000

The first time I heard about Hacktoberfest, it was in 2017. I had very little knowledge about programming but since then I followed the event every year and learned step by step git and how to make a pull request.

Today I am a self-taught game developer, and when I look back after 3 years of personal development, I couldn't believe it could happen. This event not only pushed me to learn git, but I have also learned contribution and vision to open-source and community.

So, this swag is a very milestone to prove myself and I'm proud of myself :) I'm looking forward to making more complicated PR and maybe my project to seek help from others. I want to thank you guys so hard and take good care, see you next year :)

MVC in Unity with Scriptable Objects Part 2

Cem Ugur Karacam — Sun, 29 Sep 2019 12:45:29 +0000

This part we will start to make some view elements to visualize item objects and an info panel to display item stats. A very basic inventory system as you guess. I'll focus on inventory panel for this part and we will complete this series with finishing info panel in the next part.

But first let's overview for this part:

Visual components for Item Info and Inventory
Item View Prefab in Inventory
Populate inventory with Item View
Debug.Log item info on click to Item View

We have a lot to do!

First of all, set display resolution:

Start with view. We will use Unity UI objects. Let's first create an empty canvas(Right-click in hierarchy-> UI-> Canvas)

I will make two panels, item info, and inventory panels.

I'll make an object for background, name it BG and assign it a Vertical layout component.

Now BG object's childs will line up vertically. Let's create a panel inside BG.

I'll only set panel height on RectTransform to 300 and the width will size automatically based on Vertical Layout component. Here are my settings on BG:

Now duplicate the Panel object and give it a height of 440.

I've set the height of second panel to 440.
Rename them properly.

This is how it looks.

I will continue to Info Panel next part.

Next, prepare an Item View and make it a prefab from it. To do, I'll create a button inside the inventory panel. To achieve a proper inventory visual there is a cool component for this: Grid Layout Group. Select InventoryPanel object and add that component.

Now each child of Inventory panel should place in the screen in order to constraints of grid layout group component. Let's create a button.

Button went crazy, that's because we haven't work on grid layout component. I'll add an Image object to button as a child object for item icon and don't forget to uncheck Raycast Target property on Image component, this way it won't block mouse events for button click.

I've duplicated the button a few times. Four items fit and look pretty enough for this tutorial. How it looks:

Before moving further, we have to make a script for view for the item. This view will responsible for holding item data and will fire up an event on click(Debug.Log item stats for this blog).

Create a new script, name it ItemView.

ItemView is responsible for carrying data, visual references, on click action and initial state for injecting item data.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ItemView : MonoBehaviour
{
    public Button button;
    public Image ItemIcon;

    private ItemData itemData;
}

And define a method for inital state:

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ItemView : MonoBehaviour
{
    public Button button;
    public Image itemIcon;

    private ItemData itemData;

    public void InitItem(ItemData item)
    {
        this.itemData = item;

        button.onClick.AddListener(ButtonClicked);
    }

    private void ButtonClicked()
    {
        Debug.Log(itemData.name);
    }
}

I think we need some sample icons to use in our project. I've quickly searched for it and found this free package from asset store. Let's import it.

Now I can add a variable to hold icon data in ItemData.

using UnityEngine;

[CreateAssetMenu]
public class ItemData : ScriptableObject
{
    public string itemName;
    public ItemType type;
    public float attack;
    public Sprite icon; 

    public float GetPrice()
    {
        return attack * 40;
    }
}

public enum ItemType
{
    Dagger,
    Axe,
    Hammer,
    Potion
}

Next, in ItemView we can add an icon to view.

public void InitItem(ItemData item)
{
  this.itemData = item;
  itemIcon.sprite = itemData.icon;

  button.onClick.AddListener(ButtonClicked);
}

I'll assign this script to my button in the scene and I'll name it my button to Item. Afterward, drag and assign button and image for icon.

I'll delete other buttons that we have duplicated for the test, and save the Item gameobject as a prefab in project folder dragging into it.

The view is almost ready. I need four item to populate my inventory. I'll create and assign icons to my models that I've created the last part.

Models are ready.

Next, create a script ItemViewController.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ItemViewController : MonoBehaviour
{
    public Inventory inventoryHolder;
    public Transform inventoryViewParent;
    public GameObject itemViewPrefab;

    private void Start() 
    {
        foreach (var item in inventoryHolder.inventory)
        {
            var itemGO = GameObject.Instantiate(itemViewPrefab, inventoryViewParent);
            itemGO.GetComponent<ItemView>().InitItem(item);
        }
    }
}

So we have references to inventory that holds ItemData that we have created in the project folder, a transform reference for creating ItemView objects as a child of inventory view in the scene and the item view that we have saved in the project folder as prefab. Then, in Start method, I create an instance of item view and calling InitItem method to initiate that view with Item data for each item in the inventory holder.

Lastly, I'll make an empty gameObject to attach this controller and drag and assign its references in the scene.

Make sure that your models all assigned into inventory.

Wow, we've done a lot without test but now is the time.

Hit to play!

Items have created but I forgot to delete Text object from button. When you create a button in unity it comes with Text object. To do that, open the prefab that we have saved in the project folder. It'll open project edit in Scene tab. Delete Text object and return to the scene.

Now, give it another go.

It works!!! Congrats😎👏!

Next part we will complete the info panel.

Here is the github page

Until next time, cheers!

Making a REST service using Node and Express to use with Unity - Part 3

Cem Ugur Karacam — Tue, 24 Sep 2019 10:40:14 +0000

Greetings to all unity ninjas!

This part we'll make a POST request from a unity client to the node server. We haven't made a database, yet, so I'll make an array for now.

Start with server-side. In app.js, remember that we had a single enemy object, this part, I'll make an array and populate with some enemy.

let enemies = [
    {
        "id": 0,
        "name": "orc",
        "health": 100,
        "attack": 25
    },
    {
        "id": 1,
        "name": "wolf",
        "health": 110,
        "attack": 25
    }
];

Next, tell express to support JSON-encoded bodies.

app.use(express.json());

Next, let's make a post method to receive a request from unity client.

app.post('/enemy/create', (req, res) => {
let newEnemy = {
    "id": req.body.id,
    "name": req.body.name,
    "health": req.body.health,
    "attack": req.body.attack
};

enemies.push(newEnemy);
console.log(enemies);
res.send(enemies);
});

And I'll modify my get method to fetch my enemies array. Now my app.js file looks like this:

const express = require('express');
const app = express();
app.use(express.json());

app.get('/', (req, res) => {
    res.send('Hello Unity Developers!');
});

let enemies = [
    {
        "id": 0,
        "name": "orc",
        "health": 100,
        "attack": 25
    },
    {
        "id": 1,
        "name": "wolf",
        "health": 110,
        "attack": 25
    }
];

app.get('/enemy', (req, res) => {
    res.send(enemies);
});

app.post('/enemy/create', (req, res) => {
let newEnemy = {
    "id": req.body.id,
    "name": req.body.name,
    "health": req.body.health,
    "attack": req.body.attack
};

enemies.push(newEnemy);
console.log(enemies);
res.send(enemies);
});

app.listen(3000, () => console.log('started and listening.'));

Open a terminal, start node and it's time to visit unity client.

node app.js

Let's make an api call, I'll use postman.

Don't forget to set header and body to application/json.

Now make an enemy json string based on the enemy schema and hit to send.

Seems our enemies growing :)

Last part, we have successfully received a json object and displayed it to screen with unity ui elements. But this part our structure has changed a bit. I've added id property to the enemy and my response now not an object but an array.

First, add id property to Enemy class in unity.

public class Enemy
{
    public int id;
    public string name;
    public int health;
    public int attack;
}

Yeah, that was easy! But keep in mind, JsonUtility does not work with {get; set;}.

Now the important part! If your task is to send a json array and parse in unity, there is no out of the box solution with JsonUtility, unfortunately. Don't worry, after a couple googling and experimenting, I found a workaround, for a detailed explanation, take a look here and here.

For example, If your response is like this, then JsonUtility won't work:

[
  {
    //item
  },
  {
    //item
  },
  {
    //item
  }
]

Instead, we'll make it a single key and an array object as a value:

{
    "result": [{//item},{//item},{//item}]
}

This way, we have a one list of items and this structure works with JsonUtility.

To make this trick possible we'll make a static class named JsonHelper. Let's create it in the project folder.

using UnityEngine;
using System.Collections.Generic;

public static class JsonHelper
{
    public static List<T> FromJson<T>(string json)
    {
        Wrapper<T> wrapper = JsonUtility.FromJson<Wrapper<T>>(json);
        return wrapper.result;
    }

    [System.Serializable]
    private class Wrapper<T>
    {
        public List<T> result;
    }
}

JsonHelper class has a generic FromJson method that returns a list of any class we're going to make. Here key part is the Wrapper class that has a result list that stores the values from. In our case, when we get an array of json objects from server, we have to modify our response string like this:

{
    "result": [
        //enemy,
        //enemy
    ]
}

We have discussed our schema and made a helper class to make it work, let's write some code!

First, mark the Enemy class as Serializable, so unity will be able to convert to json. More explanation here.

[System.Serializable]
public class Enemy
{
    public int id;
    public string name;
    public int health;
    public int attack;
}

Second, open ClientApi script and make a post method. It will take two parameters, post url and an enemy object to feed in unity's post method.

public IEnumerator Post(string url, Enemy enemy)
{
  var jsonData = JsonUtility.ToJson(enemy);
  Debug.Log(jsonData);

  using(UnityWebRequest www = UnityWebRequest.Post(url, jsonData))
  {

  }
}

We are converting an Enemy object to a json string with JsonUtility.

Next, configure our request's content-type.

public IEnumerator Post(string url, Enemy enemy)
{
  var jsonData = JsonUtility.ToJson(enemy);
  Debug.Log(jsonData);

  using(UnityWebRequest www = UnityWebRequest.Post(url, jsonData))
  {
        www.SetRequestHeader("content-type", "application/json");
    www.uploadHandler.contentType = "application/json";
    www.uploadHandler = new UploadHandlerRaw(System.Text.Encoding.UTF8.GetBytes(jsonData));

    yield return www.SendWebRequest();
  }
}

We have set our method to send a json object and to a url endpoint.

Remember that, we send back our enemies as a response after request. So, let's make a list from the response, then display to console. Now, time to handle response end error.

// handle the result
var result = System.Text.Encoding.UTF8.GetString(www.downloadHandler.data);  
result = "{\"result\":" + result + "}"; 
var resultEnemyList = JsonHelper.FromJson<Enemy>(result);

foreach (var item in resultEnemyList)
{
  Debug.Log(item.name);
}

This is the part that we have discussed above. As soon as I get data, I modified it to be able to work with JsonHelper.

Then just display to console each element's name to test.

public IEnumerator Post(string url, Enemy enemy)
{
  var jsonData = JsonUtility.ToJson(enemy);
  Debug.Log(jsonData);

  using(UnityWebRequest www = UnityWebRequest.Post(url, jsonData))
  {
        www.SetRequestHeader("content-type", "application/json");
    www.uploadHandler.contentType = "application/json";
    www.uploadHandler = new UploadHandlerRaw(System.Text.Encoding.UTF8.GetBytes(jsonData));
    yield return www.SendWebRequest();

    if (www.isNetworkError)
    {
      Debug.Log(www.error);
    }
    else
    {
      if (www.isDone)
      {
        // handle the result
        var result = System.Text.Encoding.UTF8.GetString(www.downloadHandler.data);  
        result = "{\"result\":" + result + "}"; 
        var resultEnemyList = JsonHelper.FromJson<Enemy>(result);

        foreach (var item in resultEnemyList)
        {
          Debug.Log(item.name);
        }
      }
      else
      {
        //handle the problem
        Debug.Log("Error! data couldn't get.");
      }
    }
  }
}

To test, define a string variable for post url, make an Enemy object in Start and switch back to unity.

public string getUrl  = "localhost:3000/enemy";
public string postUrl = "localhost:3000/enemy/create";

void Start()
{
  var enemy = new Enemy(){
    id = 100,
    name = "Balrog",
    health = 1000,
    attack = 2500
  };

  StartCoroutine(Post(postUrl, enemy));
}

Time to hit Play!

Check console.log on terminal too.

Good job, our unity ninja skills improved a bit more!!🎉🎉🎉🌟🌟🌟👏👏👏😎😎

Looks like we have successfully sent data from unity client, received from the server and responded with updated data 😎👾

Grab the code here

Next part we'll post with the ui element's help and to handle data in unity, we'll use Scriptable Objects.

Until the next part, cheers!

MVC in Unity with Scriptable Objects Part 1

Cem Ugur Karacam — Mon, 16 Sep 2019 10:38:39 +0000

Welcome to the first part of MVC in Unity with Scriptable Objects. I'll make this part Scriptable Objects only and it will remain plain and simple.

First, hear from unity:

A class you can derive from if you want to create objects that don't need to be attached to game objects.

This is most useful for assets which are only meant to store data.

Then we should ask.

why?

Scriptable Objects native to unity. It has built-in features to use in the editor.

I like the way you use the unity editor in the development cycle. You could make your own editor tools and default editor tools easy enough to configure. With Scriptable Objects, you could carry it further, make your custom data assets and use it in editor or use as a data container.

The image shown above is a sample usage of a Scriptable Object in unity. A single .asset file created in project file can responsible to carry info to many other system in the game and it persists. There is a great presentation about SO on youtube if you'd like to get more (its name Overthrowing the MonoBehaviour Tyranny in a Glorious Scriptable Object Revolution :)) about this.

Another great sample is shown above. Here other MonoBehaviour objects have a reference on Inventory object and Save System has them all. This image is from another great talk, Game Architecture with Scriptable Objects, I highly recommend to check out his approach.

Another awesomeness to add is you wouldn't want to use over .json or .xml to over SO once you understand it features. This makes it perfect for a configuration mechanism in unity.

So let's use it in an action.

using UnityEngine;

public class ItemData : ScriptableObject
{
    public string itemName;
    public ItemType type;
    public float attack;        
}

public enum ItemType
{
    Dagger,
    Axe,
    Sword,
    Staff
}

We have created a class named ItemData and some attributes like in rpg games. We'll make some item in project folder and access them from a script to display on console. But before that, we have add a crucial ingredient to our ItemData class.

using UnityEngine;

[CreateAssetMenu]
public class ItemData : ScriptableObject
{
    public string itemName;
    public ItemType type;
    public float attack;        
}

public enum ItemType
{
    Dagger,
    Axe,
    Sword,
    Staff
}

CreateAssetMenu attribute is we have added on ItemData class is specifying to unity that we want to create a file in project folder from this SO class, otherwise, you can't create .asset file from the editor with right-click or use create button in the project folder.

Let's create a folder named Items and try to create an ItemData in the project folder.

I'll make another script to hold these data files named Inventory.

using UnityEngine;

public class Inventory : MonoBehaviour
{
    public ItemData[] inventory;
}

Add a method to display item info on console and length control to inventory.

using UnityEngine;

public class Inventory : MonoBehaviour
{
    public ItemData[] inventory;

    int index = 0;

    public void NextItemInfo()
    {
        if (index > inventory.Length)
        {
            index = 0;
        }

        Debug.Log("Item name: " + inventory[index].name);
        Debug.Log ("Attack power: " + inventory[index].attack);

        switch(inventory[index].type)
        {
            case ItemType.Axe: 
            Debug.Log("Item type: Axe"); 
            break;

            case ItemType.Dagger: 
            Debug.Log("Item type: Dagger");
            break;

            case ItemType.Staff: 
            Debug.Log("Item type: Staff");
            break;

            case ItemType.Sword: 
            Debug.Log("Item type: Sword"); 
            break;
        }

        index ++;
    }

}

I'll use the space bar to use our method. It very easy makes it with unity. In Update we'll check if our key pressed, thanks to Input class.

using UnityEngine;

public class Inventory : MonoBehaviour
{
    public ItemData[] inventory;

    int index = 0;

    private void Update() 
    {
        if (Input.GetKeyDown(KeyCode.Space))    
        {
            NextItemInfo();
        }
    }

    public void NextItemInfo()
    {
        if (index > inventory.Length)
        {
            index = 0;
        }

        Debug.Log("Item name: " + inventory[index].name);
        Debug.Log ("Attack power: " + inventory[index].attack);

        switch(inventory[index].type)
        {
            case ItemType.Axe: 
            Debug.Log("Item type: Axe"); 
            break;

            case ItemType.Dagger: 
            Debug.Log("Item type: Dagger");
            break;

            case ItemType.Staff: 
            Debug.Log("Item type: Staff");
            break;

            case ItemType.Sword: 
            Debug.Log("Item type: Sword"); 
            break;
        }

        index ++;
    }

}

Now, It's time to switch back to unity editor. We'll populate our inventory array with our ItemData files that we have created in Items folder. But first, let's create an empty object in the scene and attach our Inventory script.

Let's give it a go. Hit play to test it.

It's working! Now I want to want to show you that you could not only carry variables in SO, but we'll also add a method to calculate the price for us in ItemData . Look up in docs to more in here and here.

using UnityEngine;

[CreateAssetMenu]
public class ItemData : ScriptableObject
{
    public string itemName;
    public ItemType type;
    public float attack;        

    public float GetPrice()
    {
        return attack * 40;
    }
}

Then in Inventory let's use our new method :

using UnityEngine;

public class Inventory : MonoBehaviour
{
    public ItemData[] inventory;

    int index = 0;

    private void Update() 
    {
        if (Input.GetKeyDown(KeyCode.Space))    
        {
            NextItemInfo();
        }
    }

    public void NextItemInfo()
    {
        if (index == inventory.Length)
        {
            index = 0;
        }

        Debug.Log("Item name: " + inventory[index].name);
        Debug.Log ("Attack power: " + inventory[index].attack);

        switch(inventory[index].type)
        {
            case ItemType.Axe: 
            Debug.Log("Item type: Axe"); 
            break;

            case ItemType.Dagger: 
            Debug.Log("Item type: Dagger");
            break;

            case ItemType.Staff: 
            Debug.Log("Item type: Staff");
            break;

            case ItemType.Sword: 
            Debug.Log("Item type: Sword"); 
            break;
        }
        Debug.Log("Item price: " + inventory[index].GetPrice());

        index ++;
    }

}

Now hit the play to see the result.

Check out unity project on github!

This was the end of our first part. Next part we'll introduce the MVC in unity. But since we are familiar with the SO, we'll add some SO spice to make it more robust and this is how unity ninja's do 😎👾

Making a REST service using Node and Express to use with Unity - Part 2

Cem Ugur Karacam — Sun, 08 Sep 2019 12:08:58 +0000

Hello fellow developers! Thanks for all good vibes for part-1. We will deep dive into unity again.

Here's the github project, if you want to follow along with blogpost.

I've decided to make another series, Unity MVC with Scriptable Objects, to boost up our ninja rest communication skills with unity in our development.

Last part, we have started small. This part we will meet JsonUtility class to parse our data.

First of all, let's provide a json data from our server. I'll make an object to send when a client asks for it.
Since we don't have a database yet, let's just define a json object in app.js. Then send it back to client.

/enemy/orc url end point is good enough to start with.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello Unity Developers!');
});

let enemy = {
    "name": "orc",
    "health": 100,
    "attack": 25
}

app.get('/enemy/orc', (req, res) => {
    res.send(enemy);
});

app.listen(3000, () => console.log('started and listening.'));

Start a local server, grab a terminal and type node app.js.

Before jump to unity, give it a go with your favorite api request to localhost:3000/enemy/orc.

Seems no error.
We will do more work on our node server to make it a proper api. But first we need to learn fundamentals of json parsing in unity.

Now jump in to unity. Last part we have created our ClientApi class and attached to an object in the hierarchy. Pass our endpoint to url parameter and let's read the console.

Everything seems working so far.

I like working with json in node, it's native to javascript and web lives with json communication, literaly. In unity, you'll need a couple more step.

Let's take a look closer to our json data.

{
    "name": "orc",
    "health": 100,
    "attack": 25
}

We'll make a model (or contract) class to match these values. Create a c# script in project folder and name it Enemy.

public class Enemy
{
    public string name;
    public int health;
    public int attack;
}

As you notice, it doesn't derive from anything, just a plain c# class.
Our goal is making an instance from this model class when you get the data from api and inject in to JsonUtility.

Now it's the part that parsing involves in. Open the ClientApiand after recieving data call the JsonUtility class for json boogie magic. Since its a generic method we have to specify a type as well, in this case Enemy.

var enemy = JsonUtility.FromJson<Enemy>(result);

In unity, you have to be careful when working with json, because JsonUtility class has some limitations. Our json schema will work because JsonUtility class created to work this way. I'll explain more about next parts how you should structure your schema when working with this class. There are some other solutions available to parse json in unity as well, but my intention is making this system with no third party extension or library, only vanilla unity.

Making a REST service using Node and Express to use with Unity - Part 1

Cem Ugur Karacam — Sun, 01 Sep 2019 11:58:47 +0000

Making a game with unity is super cool. But what about online features like saving some data to a database like user info, progress, items, enemies...? You may familiar with node and rest api, but to sending a request from unity and handling received data is a bit itchy in unity.

So let's throw a blog series with unity and node. Then we gonna host it on heroku!

In this part we'll make our "Hello World" project.

Here is the project link on github.

If you've never heard about rest api, I recommend to first check out this tutorial to understand what it means.

Then, lemme write some code.

First open a terminal and initiate our node project file.

npm init

Second, installing express.

npm install express

Make our entry point. Let's call it app.js.

touch app.js

Open the freshly created file with your favorite code editor(mine is vscode in this case) and import express.

const express = require('express');
const app = express();

Our app should listen a port, 3000. Second parameter, a callback, write a message to console.

app.listen(3000, () => console.log('started and listening.'));

One last step before run. When you ask to our app, we should respond back to user. In express this process stupidly simplified with below. When we hit localhost:3000 or make a call with postman our app will respond on certain endpoints. For the hello world project let's respond on home directory '/'.

If you're struggle with what an endpoint means or api ,http callback protocol, I recommend again to first check out this tutorial.

app.get('/', (req, res) => {
    res.send('Hello Unity Developers!');
})

Let's take a look to our code before we run.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello Unity Developers');
})

app.listen(3000, () => console.log('started and listening.'));

Open a terminal and run the code.

node app.js

If no error occured, we should see our console.log on terminal.

Now let's test it before switching to unity.
Go to your browser or postman to test our address localhost:3000.

Seems working!
So we have made a working service that replies when we ask. How do we do in unity?

Luckily unity have some http callback wrappers.

Let's open a fresh empty unity project and create an empty GameObject in our scene, rename it as 'client'.

Now create a c# script in the Project folder, I'll name it ClientAPI.

In that script we should add a new namespace before we write any code.

using UnityEngine.Networking;

Then we will define a method that returns an IEnumerator that enables async-like functionality in unity. If you're not sure how to use unity coroutines, this resource might be a good start.

public IEnumerator Get(string url)
{

}

To make a web request let's define a new UnityWebRequest

public IEnumerator Get(string url)
{
    using(UnityWebRequest www = UnityWebRequest.Get(url))
    {

    }
}

I'll put a link for why we need a using statement here. Also check-out unity docs for further reading.

This part is where couroutine magic involves. We should use yield return keyword when sending a request, it will make sure the process complete until it's done.

public IEnumerator Get(string url)
{
    using(UnityWebRequest www = UnityWebRequest.Get(url))
    {
        yield return www.SendWebRequest();
    }
}

Afterwards, check for errors.

public IEnumerator Get(string url)
{
    using(UnityWebRequest www = UnityWebRequest.Get(url))
    {
        yield return www.SendWebRequest();

        if (www.isNetworkError)
        {
            Debug.Log(www.error);
        }
        else
        {

        }
    }
}

If no errror, then it's completed succesfuly.

We have revieved some data from http connection but we should parse these as a string to further work. We'll feed the data as www.downloadHandler.data from our api. Return our parsed data as string.

public IEnumerator Get(string url)
{
    using(UnityWebRequest www = UnityWebRequest.Get(url))
    {
        yield return www.SendWebRequest();

        if (www.isNetworkError)
        {
            Debug.Log(www.error);
        }
        else
        {
            if (www.isDone)
            {
                // handle the result
                var result = System.Text.Encoding.UTF8.GetString(www.downloadHandler.data);
                Debug.Log(result);
            }
            else
            {
                //handle the problem
                Debug.Log("Error! data couldn't get.");
            }
        }
    }
}

And define a public variable to provide url.
Now let's give it a go, call our method on Start. To use coroutines, we have to call it as StartCoroutine() otherwise it won't work.
Take a look to whole script.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;

public class ClientApi : MonoBehaviour
{
    public string url;

    void Start()
    {
        StartCoroutine(Get(url));
    }

    public IEnumerator Get(string url)
    {
        using(UnityWebRequest www = UnityWebRequest.Get(url)){
            yield return www.SendWebRequest();

            if (www.isNetworkError)
            {
                Debug.Log(www.error);
            }
            else
            {
                if (www.isDone)
                {
                    // handle the result
                    var result = System.Text.Encoding.UTF8.GetString(www.downloadHandler.data);
                    Debug.Log(result);
                }
                else
                {
                    //handle the problem
                    Debug.Log("Error! data couldn't get.");
                }
            }
        }

    }
}

Jump back to the unity editor and add script to client GameObject.

Next, enter our address to url.

Now hit play.

We should see the message on the console if you succeeded.

Wow! isn't that cool?

Our server and unity client works like a charm. Congrats!

Here is the project link on github.

BONUS

Let's add some trailer images to make some hype about next parts :)