Andrea Tonin (CTO & Full Stack Developer of Software & Metaverse Games)

Unity3D – Tutorials – UI – Responsive BG Image Setup

Unity3D – Tutorials – UI – Responsive BG Image Setup

This feature is avaiable for Unity3D 4.6 or above.

Create Objects

1. Open Unity3D and create:

– MAIN TOP MENU> GameObject> Camera, name it ‘Main Camera’
– MAIN TOP MENU> GameObject> UI> Canvas
– MAIN TOP MENU> GameObject> UI> Image

NOTICE: Canvas will be created inside Layer UI

NOTICE: In the Hierarchy there is:
– Canvas
-> Image (it is the child of Canvas)

Setup Viewports and Tools

2. 3D Viewport select orthographic X View
3. TOP LEFT> TOOLS> Canvas Manipulation icon
4. Game Viewport> 4:3

Setup Canvas

5. Hierarchy> Canvas> Inspector>

Canvas>
– Render Mode: ScreenSpace – Overlay (you will see the button over 3D scene)
– Pixel Perfect: check

Setup BG Image – Single – No Free Aspect

This setup will work fine only with Fixed Aspect

Canvas Scaler>
– Ui Scale Mode> Scale with Screen Size
– Reference Resolution: 800×600 (Remember that Game Viewport is set at 4:3)
E’ solo una unità di riferimento, non sono pixel, ci baseremo su questo parametro per settare i parametri di Rect Transform
– Screen Match Mode: Match Width or Height

NOTE: Pixel Perfect means when displaying a 2D texture, each pixel in the texture is represented by only one pixel on the screen. When you want your 2D-displayed textures to look their best, this is often what is strived for.

0. Project Window> RMB> Import New Asset…> myimage.jpg> Inspector> Texture Type> Sprite (2D and UI)

1. Hiearchy> Image> Inspector

> DRAG AND DROP myimage.jpg over Image (Script)> Source Image slot

> Rect Transform
– Anchor Preset Button (the square icon on top left with a target): middle center
– Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
– Pos X=0 Y=0 Z=0
– Width= 800 Height= 600 (Remember: Canvas> Reference Resolution: 800×600)

> Image (Script)
– Image Type: Simple

2. Play and try to resize the game port.

Setup BG Image – Tiled – Yes Free Aspect – 1st Solution

This setup will work fine with Free Aspect

Canvas Scaler>
– Ui Scale Mode> Constant Physical Size

0. Project Window> RMB> Import New Asset…> myimage.jpg> Inspector> Texture Type> Sprite (2D and UI)

1. Hiearchy> Image> Inspector

> DRAG AND DROP myimage.jpg over Image (Script)> Source Image slot

> Image (Script)
– Image Type: Tiled

> Rect Transform
– Scale: setup the size of the tiles

2. Play and try to resize the game port.

Setup BG Image – Tiled – Yes Free Aspect – 2nd Solution

Create in the scene:

1. MAIN TOP MENU> GameObject> UI> Panel

2. Inspector> Panel> Image (Script)>
– Source Image> DRAG AND DROP the sprite here
– Image Type> Tiled

Setup Alpha

Hierarchy> Image> Inspector> Image (Script)> Color> click over the color slot> in the color picker setup Alpha Channel using the slider A

Multi Image Setup

1. MAIN TOP MENU> GameObject> UI> Image add two or more images at the Canvas

2. Hiearchy>

– Canvas
-> Image 1
->> Image 2 (Image 2 is over Image 1)

– Canvas
-> Image 2
->> Image 1 (Image 1 is over Image 2)

By Andrea Tonin|Unity3D, Video Games Development|Commenti disabilitati

Unity3D – Tutorials – UI – Button – OnClick

Unity3D – Tutorials – UI – Button – OnClick

This feature is avaiable for Unity3D 4.6 or above.

Create Objects

1. Open Unity3D and create:

– MAIN TOP MENU> GameObject> Camera, name it ‘Main Camera’
– MAIN TOP MENU> GameObject> UI> Canvas
– MAIN TOP MENU> GameObject> UI> Button, this will add an ‘EventSystem’ and Button will be child of Canvas

NOTICE: Canvas will be created inside Layer UI

NOTICE: In the Hierarchy there is:
– Canvas
-> Button (it is the child of Canvas)
->> Text (it is the child of Button)

Setup Viewports and Tools

2. 3D Viewport select orthographic X View
3. TOP LEFT> TOOLS> Canvas Manipulation icon
4. Game Viewport> 4:3

On Click() – Ready to use function

The UI Framework contains a powerful event system, let’s take a first look.

1. Hierarchy> select Button> Inspector> Button (Script)

> Interactable: check

> On Click> click on ‘+’ Add List

a. DRAG AND DROP The Main Camera over the empty slot

b. RIGHT ROLLOUT> GameObject> SetActive> uncheck (it means false)

c. Play and click the button to deactivate Main Camera

On Click() – Custom function

Elegible Functions

NOTICE: a function will be elegible if is – public void MyFunction() – and have none or 1 parameter.

public: deve essere pubblica, cioè poter essere letta al di fuori dello script originale
void: non restituisce un valore di ritorno, non ammette il comando – return –

The parameter can be in C#:

– public void MyFunction()
– public void MyFunction(float MyFloat)
– public void MyFunction(int myInt)
– public void MyFunction(string myString)
– public void MyFunction(bool myBool)
– public void MyFunction(Object myObject) -> Unity Object

The parameter can be in JS:

– public function MyFunction()
– public function MyFunction(float MyFloat)
– public function MyFunction(int myInt)
– public function MyFunction(string myString)
– public function MyFunction(bool myBool)
– public function MyFunction(Object myObject) -> Unity Object

1. Attacch to Main Camera MyCameraScript.js:


#pragma strict

function Start () {
}

public function MyFunction(){
Debug.Log ("Clicked!");
}

function Update () {
}

2. Hiearchy> select Button> Inspector> Button (Script)> OnClick()> DRAG AND DROP The Main Camera over the empty slot

3. RIGHT ROLLOUT> GameObject> MyCameraScript> MyFunction

4. Play and click the Button

By Andrea Tonin|Unity3D, Video Games Development|Commenti disabilitati

Unity3D – Tutorials – UI – Responsive Button Setup

Unity3D – Tutorials – UI – Responsive Button Setup

This feature is avaiable for Unity3D 4.6 or above.

Create Objects

1. Open Unity3D and create:

NOTICE: Canvas will be created inside Layer UI

NOTICE: In the Hierarchy there is:
– Canvas
-> Button (it is the child of Canvas)
->> Text (it is the child of Button)

Setup Viewports and Tools

2. 3D Viewport select orthographic X View
3. TOP LEFT> TOOLS> Canvas Manipulation icon
4. Game Viewport> 4:3

Setup Canvas

5. Hierarchy> Canvas> Inspector>

Canvas>
– Render Mode: ScreenSpace – Overlay (you will see the button over 3D scene)
– Pixel Perfect: check

Setup Button

6. Hierarchy> Button> Inspector>

Rect Transform>

– Width: 400 (Remember that Reference Resolution is 800×600)
– Height: 200 (Remember that Reference Resolution is 800×600)

WARNING: If you use ‘Scale XYZ’ the graphic will be stretched.

Center Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Left Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: -200,0,0 (Remember that Reference Resolution is 800×600 -> 800/2-400/2=200)

Right Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 200,0,0

Top Right Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 200,250,0

Top Left Alignement – No Stretch
Alignement icon (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: -200,250,0

Center Alignement – Stretch Width
Anchor Preset Button (the square icon on top left with a target): middle stretch
Anchors: Min X=0 Y=0.5 Max X=1 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Center Alignement – Stretch Height
Anchor Preset Button (the square icon on top left with a target): stretch center
Anchors: Min X=0.5 Y=0 Max X=0.5 Y=1 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Center Alignement – Stretch Width and Height
Anchor Preset Button (the square icon on top left with a target): stretch strech
Anchors: Min X=0 Y=0 Max X=1 Y=1 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Image (Script)> setup the appearance you like

Button (Script)> setup the appearance you like

Setup Button Text

7. Hiearchy> select Text (child of Button)> Inspector>

> Rect Transform

Pos XYX: to positioning text

Width, Height: to size the rectangle that contain the text

Anchors Preset Button: to setup anchors

Rotation: to rotate text

Scale: WARNING: using scale the graphic will be stretched! Use Text> Font Size instead, it is better.

> Text

Font: PAY ATTENTION you need include the font inside the project to Build the game or your font will be lost in the final executable build.

Font Size: to resize the text

No Overflow
Horizontal Overflow: Wrap
Vertical Overflow: Truncate

Yes Horizontal and Vertical Overflow
Horizontal Overflow: Overflow
Vertical Overflow: Overflow

8. Try resize Game Window… it will works great!

By Andrea Tonin|Unity3D, Video Games Development|Commenti disabilitati

CGI Scripting – How it works

CGI Scripting – How it works

What is CGI Scripting and how can I use it on my site?
Common Gateway Interface (CGI) is a standard method used to generate dynamic content on Web pages and Web applications.
In plain words inside your web server you will find a folder www/cgi-bin, here you can store executable files.

An ultra simple example:

Browser send -> www.your.com/your.html -> Static Content
Browser send -> www.your.com/your.php -> Dynamic content PHP language
Browser send -> www.your.com/cgi-bin/your.cgi -> Dynamic Content PERL/C Language

CGI scripts can be PERL (.pl) or C (.c)

Your web hosting have to allow CGI scripts!

Hello there!

We will get the same output “Hello there!” using the codes below;

simplest.html:


<html>
  <body>
     <h1>Hello there!</h1>
  </body>
</html>

It prints:

Hello there!

simplest.c:


#include <stdio.h>

int main()
{
  printf("Content-type: text/html\n\n");
  printf("<html>\n");
  printf("<body>\n");
  printf("<h1>Hello there!</h1>\n");
  printf("</body>\n");
  printf("</html>\n");
  return 0;
}

I can use GCC (GNU Compiler Collection – https://gcc.gnu.org/) by saying: gcc simplest.c -o simplest.cgi, the output file is ‘simplest.cgi’.
I can upload simplest.cgi inside my server at www/cgi-bin and call it widt my browser typing www.your.com/cgi-bin/simplest.cgi

It prints:

Hello there!

Notice:


printf("Content-type: text/html\n\n");

The line “Content-type: text/html\n\n” is special piece of text that must be the first thing sent to the browser by any CGI script.
It sends: ‘Hey Browser, you have to consider that an html file’
If you forget, the browser will reject the output of the script.

The perl code (http://perldoc.perl.org/index.html) here:

simplest.pl:


#! /usr/bin/perl
print "Content-type: text/html\n\n";
print "<html><body><h1>Hello World!";
print "</h1></body></html>\n";

Place the file into your cgi-bin directory. On a UNIX machine, it may help to also type:
chmod 755 simplest.pl

This tells UNIX that the script is executable.

Counter

count.c:


#include <stdio.h>

int incrementcount()
{
  FILE *f;
  int i;

  f=fopen("count.txt", "r+");
  if (!f)
  {
     sleep(1);
     f=fopen("count.txt", "r+");
     if (!f)
       return -1;
  }

  fscanf(f, "%d", &i);
  i++;
  fseek(f,0,SEEK_SET);
  fprintf(f, "%d", i);
  fclose(f);
  return i;
}

int main()
{
  printf("Content-type: text/html\n\n");
  printf("<html>\n");
  printf("<body>\n");
  printf("<h1>The current count is: ")
  printf("%d</h1>\n", incrementcount());
  printf("</body>\n");
  printf("</html>\n");
  return 0;
}

Compile it by typing: gcc count.c -o count.cgi

Create another text file named count.txt and place a single zero in it. By placing counter.cgi and count.txt in the cgi-bin directory, you can run the script. All that the script does is generate a page that says, “The current count is: X,” where X increments once each time you run the script. Try running it several times and watch the content of the page change!

The count.txt file holds the current count, and the little incrementcount() function is the function that increments the count in the count.txt file. This function opens the count.txt file, reads the number from it, increments the number and writes it back to the file. The function actually tries to open the file twice. It does that just in case two people try to access the file simultaneously. It certainly is not a foolproof technique, but for something this simple it works. If the file cannot be opened on the second attempt, -1 is the error value returned to the caller. A more sophisticated program would recognize the -1 return value and generate an appropriate error message.

Reference:
http://it.wikipedia.org/wiki/Common_Gateway_Interface
http://computer.howstuffworks.com/cgi.htm

By Andrea Tonin|Web Design|Commenti disabilitati

Client-Server Communication Socket-Based in Videogames – Basic Concepts

Client-Server Communication Socket-Based in Videogames – Basic Concepts

What is a Client-Server Communication

Client-server is a request-response remote communication model that involves processes requesting services from other processes which offer these services via the network.
The processes offering services by executing certain tasks following remote process requests are known as servers. In general, the servers receive requests from remote processes, execute the tasks associated with these services, and dispatch responses back to the requesting entities. Example of services include database information retrieval and updates, file system access services, and dedicated user-application tasks.
The process that contact the servers and request them to perform services is known as Client

In general, Client processes manage user-interfaces, validate data entered by users, dispatch requests to servers, collect servers’ responses, and/or display the information received.

Client-Server Communication in Videogames

In the fantastic world of videogames development we find:

Client
It is the videogame, installed in your PC, Mobile Device or Web Player, generally:
– manage the user input
– manage local data as scores, lives etc…
– collect data from a database installed inside a Server and manage it inside the videogame

Server
It is the computer that stores (using for example MySQL) accounts, scores and others usefull datas for the gamer
If you play a MMORPG (Massive(ly) Multiplayer Online Role-Playing Game, you will see that the Server manages a lot af data and thousands of users in the same time.

Low Data Management

If you have to manage few users or only username and scores value, the server will not work hard, it is enough a communication like that:

Client (Videogame) -> PHP POST REQUEST -> Server with PHP+MySQL offers a service

High Data Management

You are in trouble, there are thousands of users that sends thousands of PHP POST in the same time.
Using the previus scheme we have:

Client1 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client2 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client3 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client4 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client5 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client6 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client7 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client8 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client9 (Videogame) -> PHP POST -> Server with PHP+MySQL offers a service
Client1000000 (Videogame) -> PHP POST REQUEST -> Server with PHP+MySQL offers a service …-> CRASH OF THE SYSTEM!!!

The solution are:

1. Use of SSD (Solid State Drive) instead ad traditional Hard Driver
2. Use of one or more dedicated servers, not sharing IP or low-end hosting solution admitted!
3. Use of Client-Server Communication Socket-Based

The Client-Server Communication Socket-Based is:

With WebSockets you can transfer as much data as you like without incurring the overhead associated with traditional HTTP requests. Data is transferred through a WebSocket as messages, each of which consists of one or more frames containing the data you are sending (the payload).

To run a WebSocket you need a DEDICATED IP, no SHARED IP are allowed, because you will setup your own IP and listening ports.

A popular software to create a WebSocket is Node.js (http://nodejs.org/).

WebSoscket inside a SHARED IP

You can run Node.js in a shared host using CGI-Node (http://www.cgi-node.org/).
‘CGI-Node’ is a CGI adaptor for node.js that mimmicks the Node.js http library.

Low Latency Client-Server and Server-Client Connections

Around 2005, AJAX started to make the web feel more dynamic. Still, all HTTP communication was steered by the client, which required user interaction or periodic polling to load new data from the server.

One of the most common hacks to create the illusion of a server initiated connection is called long polling. With long polling, the client opens an HTTP connection to the server which keeps it open until sending response. Long polling and the other techniques work quite well. You use them every day in applications such as GMail chat.

However, all of these work-arounds share one problem: They carry the overhead of HTTP, which doesn’t make them well suited for low latency applications. Think multiplayer first person shooter games in the browser or any other online game with a realtime component.

The WebSocket (http://dev.w3.org/html5/websockets/) specification defines an API establishing “socket” connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time over a single TCP channel.

WebSocket give you a bidirectional communication technology for web apps for:
IE 10 or over
Firefox 33 or over
Chrome 31 or over
Safari 7.1 or over
Opera 26 or over
iOS Safari 7.1 or over
Android Browser 4.4 or over
Chrome for Android 39 or over

What it means single TCP Channel?

The Transmission Control Protocol (TCP) is one of the core protocols of the Internet protocol suite (IP), and is so common that the entire suite is often called TCP/IP.

IP works by exchanging pieces of information called packets. A packet is a sequence of bytes and consists of a header followed by a body. The header describes the packet’s source, destination and control information. The body contains the data IP is transmitting. The size of one IP packet is 65535 bytes (63.99902 Kbyte or 0.0625 Mbyte).

Due to network congestion, traffic load balancing, or other unpredictable network behavior, IP packets can be lost, duplicated, or delivered out of order. TCP detects these problems, requests retransmission of lost data, rearranges out-of-order data, and even helps minimize network congestion to reduce the occurrence of the other problems.

TCP is utilized extensively by many of the Internet’s most popular applications, including the World Wide Web (WWW), E-mail, File Transfer Protocol, Secure Shell, peer-to-peer file sharing, and some streaming media applications.
TCP is optimized for accurate delivery rather than timely delivery, and therefore, TCP sometimes incurs relatively long delays (on the order of seconds) while waiting for out-of-order messages or retransmissions of lost messages. It is not particularly suitable for real-time applications such as Voice over IP. For such applications, protocols like the Real-time Transport Protocol (RTP) running over the User Datagram Protocol (UDP) are usually recommended instead.

Ready to use solutions

Setup a server is very expensive, sometimes the budget and the time we can spend to develop is not enought to do that.
In the market there are some ready to use platforms to build multiplayer games.

Photon Cloud

https://www.exitgames.com

Photon Cloud is available globally to guarantee low latency and shortest round-trip times for your multiplayer games worldwide.
Distributed worldwide Photon Cloud scales seamless and automatically even for tens of thousands of concurrent users.

Customers: from indie to AAA

Support:

– Unity3D (check Unity3D Asset Store also)
– iOS
– Android
– Win8
– Unreal4
– Cocos
– HTML5
– Flash
– Marmalade
– Corona

– Realtime Multiplayer
– Turn Based Games
– Chat

App Warp

http://appwarp.shephertz.com/

Powerful, yet simple to use cloud platform for massively multiplayer realtime games

Customers: from indie to AAA

Support:

– Unity3D
– iOS
– Android
– Win8
– Unreal4
– Cocos
– HTML5
– Flash
– Marmalade
– Corona
– J2me SDK
– andengine
– Starlink SDK
– Fixel SDK
– Sencha SDK

Game Cloud

http://game-cloud.org/

Using our advanced technology we reduce the traffic to the player allowing large number of players to connect even on slow (mobile) networks without lagging

Support:

– Unity3D (Build for Unity3D integrated into Unity Editor Tools)
– Win 8
– Android
– Mac OS
– Linux
– Playstation
– XBox 360
– Wii
– iOS
– Browsers

Gamooga

http://www.gamooga.com/

State-of-art realtime backend for your apps/games that guarantees under 1ms response time. None of our competitiors can beat us here!

Support:

– Unity3D
– HTML5
– iOS
– Android
– Falsh
– Marmalade

Gamespark

http://www.gamesparks.com/

GameSparks ensures you keep your costs to a minimum whether they be intial set-up or recurring fees

Support:

– Unity3D
– Unreal 4
– iOS
– Android
– Falsh
– Marmalade

My official website: http://www.lucedigitale.com

References:

– Server Side Score
http://www.lucedigitale.com/blog/unity-3d-server-side-highscores-js-programming/

– Advanced Network Programming – Principles and Techniques (By Bogdan Ciubotaru, Gabriel-Miro Muntean)

– http://www.html5rocks.com/en/tutorials/websockets/basics/ (By Malte Ubl and Eiji Kitamura)

– http://caniuse.com/#feat=websockets

By Andrea Tonin|Video Games Development|Commenti disabilitati

Previous 21 222324 25 Next