2D water shader in Unity 3D

I recently found the need to spruce up the water in a new 2D game that I am working on, so I decided to have a play around with Unity shaders again. Here’s the code to the shader:

[sourcecode language=”js”]
Shader "Unlit/WaterTexture"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_ScrollX ("X Scroll Speed", Range(-10, 10)) = 0
_WaveSpeed("WaveSpeed", Range(0, 100)) = 10
_FrequencyX("X Axis Frequency", Range(0, 100)) = 34
_AmplitudeX("X Axis Amplitude", Range(0, 100)) = 0.005
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};

struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};

sampler2D _MainTex;
float4 _MainTex_ST;
fixed _ScrollX;
fixed _FrequencyX;
fixed _AmplitudeX;
fixed _WaveSpeed;

v2f vert (appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}

fixed4 frag(v2f i) : SV_Target
{
fixed time = _Time * _WaveSpeed;
fixed2 uvs = i.uv;
fixed offset = (_ScrollX * _Time);
uvs.x += offset;
uvs.x = fmod(uvs.x, 1);
uvs.x += sin(uvs.y * _FrequencyX + time) * _AmplitudeX;
fixed2 uvs2 = i.uv;
uvs2.x -= offset;
uvs2.x = fmod(uvs2.x, 1);
if (uvs2.x < 0)
uvs2.x += 1;
uvs2.y = 1 – i.uv.y;
uvs2.x += sin(uvs2.y * _FrequencyX + time) * _AmplitudeX;
fixed4 col = tex2D(_MainTex, uvs);
fixed4 col2 = tex2D(_MainTex, uvs2);
col = (col + col2) / 2;
return col;
}

ENDCG
}
}
}
[/sourcecode]

The main section of the code is the fragment shader, it plays with the textures U coordinates by applying a sine wave to them, it then does the same with the pixel on the opposite side of the V axis then merges them both together, it also scrolls the textures, this produces a nice running water effect.

You can grab all shaders that I make public from Github

Feel free to re-use the shader in your own creations.

Cartoon Artwork

I got to the point developing hobby games where I was fed up of using programmer art work so I decided to learn how to create a little art work, so I got a hold of a copy of DrawPlus (vector art work software) and started to learn how to draw various things using vectors,. Whilst the quality is not FAB or anything near what a proper game artist produces, I have fun doing it and it looks passable. I’ve started to create some bits for my next game (it has no title yet) but its a large collection of mini-games. Here are a few bits:

Grumpies Characters
Grumpies Characters
Cartoon Buildings
Cartoon Buildings
Cartoon Tree
Cartoon Tree
Cartoon Fence
Cartoon Fence
Cartoon Cloud
Cartoon Cloud
Cartoon Bubble Character
Cartoon Bubble Character
Cartoon Pipes
Cartoon Pipes

Feel free to use any of the images on this page (with exception to the characters) in your own games.

Installing and running Node.js on a VPS

Introduction

I recently had the requirement to implement a global none app store specific leaderboard system that can track scores and players for a mobile game that I am developing in Unity3D. After much investigation node.js seems to be the technology to use to create a server to handle it. I want it to be as quick as possible without having to resort to C++, plus I’ve been looking for an excuse to play with node.js in more detail. Ok, so I went to ovh.net and purchased one of their super cheap VPS (Virtual private server). I opted for Debian 8 LAMP (this is the Debian 8 Linux OS with, Apache web server, MySQL and PHP). After reading up the set up instructions, I managed to get logged into my VPS using PUTTY on Windows.

Installing node.js on a VPS

First thing to do is install node.js to the VPS. In the Putty terminal type the following:

Download and run the Nodesource PPA (personal package archive) installer script:

cd ~
curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh

Install node.js:

sudo apt-get install nodejs

Install the build essentials for some packages that require compilation

sudo apt-get install build-essential

Testing out the node.js installation

Ok, so now we have node.js installed, its time to create a hello world and run it to ensure that it works. In terminal create hello.js:

cd ~
nano hello.js

If you do not have the nano text editor installed then you can install it as follows:

sudo apt-get install nano

Once the file is open add the following code:

[sourcecode language=”js”]
#!/usr/bin/env nodejs
var http = require(‘http’);
http.createServer(function (req, res)
{
res.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(‘Hello World!\n’);
}).listen(8080, ‘localhost’);
console.log(‘Server is running at http://localhost:8080/’);
[/sourcecode]

Make the script executable:

chmod +x ./hello.js

Run the script:

./hello.js

Note that the script is blocking because it is sat in an infinite loop waiting for connections, so you can no longer type anything into terminal. To test, run another instance of terminal (Putty on Windows) and enter the following to test the script:

curl http://localhost:8080

You should see “Hello World” printed out which is the response from the hello.js script.

Installing and using Process Manager (PM2) for node.js

The next issue we need to look at is how to make our script run in the background so it does not block. To do that we need install a tool called PM2 (process manager for node.js):

sudo npm install -g pm2

Once installed we can set our script off running as a background process with:
pm2 start hello.js

And to make PM2 re-run when the server reboots:

pm2 startup systemd

Note that when PM2 restarts it will restart all of its running processes.

Getting node.js to work with Apache

The general idea is to run the node.js server on a different port and forward requests to a specific url to this port using a reverse proxy. To do this we need to update an Apache config file httpd.conf. Note that if you do not find this file in the /etc/apache2/ directory then you will need to create it and add the following text:

ProxyPass /node http://localhost:8000/
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

And add the following line to /etc/apache2/apache2.conf to ensure that the file gets included

Include /etc/apache2/httpd.conf

Note that it is likely that the proxy module is not enabled on Apache, in which case enable it using:

a2enmod proxy_http

Now requests to http://www.yourdomain.com/node will be forwarded to localhost:8000, adjust the original hello world node.js script to listen on port 8000 and give it a test.