Sunday, March 12, 2017

Road to 10k - Prologue - Thoughts of an author

Leave a Comment

What is "Road to 10k"?

This is the first post from a new blog series called "Road to 10k" in which you can follow my thoughts, hopes, progress, disappointments and cool solutions for problems encountered while creating and updating multiple web applications in order to reach 10,000 sales on CodeCanyon. My intention is to reach 10,000 sales by the end of this year (2017).

In other words you will read about Web Dev, JavaScript, algorithms, app performance, marketing and some occassional cursing.

Initial state

As you may or may not know, my main income source is my userTrack script that I have created in 2013 and updated regularly ever since. I have recently reached 1000 sales in my 5 years of being an author on CodeCanyon, meaning that making another 9000 sales in the 9 months left in this year would be an increase of 60 times the amount of sales I do each month.

So, what's the plan?

In order to increase my sales I have planned to do the following:
  • Create more items. I plan on creating a new product at least once every month, so by the end of the year I should have at least 10 different items in my portfolio.
  • Marketing. Although userTrack is a great script and offers good value for money, not many have heard of it because I have failed reaching out to enough webmasters, even though I tried anything from paid advertising to contacting bloggers. I suck at marketing. So, my plan in this direction is to either find someone who is really good at marketing or take more time doing content marketing (creating tutorials on how to use my items, creating guest posts explaining why they make your life easier or why are they a great piece of software).
  • Be more professional. As of now, every customer who has an issue can either contact me via the comment section of my items or via e-mail. Although this works good enough for now this is not scalable. Not only I can not keep track of opened issues if there are more than 2-3 customers complaining at once but also I can not verify their support period. On CodeCanyon the price of the item is actually composed of two things: item price and support price. When you purchase an item you get 6 months of support from the author, after this period you have to extend it (which costs about 50% of the item list price) or the author is no longer required to answer your support questions. This means that at the moment there are many customers who get support from me for free, even though their support period expired. To solve this issue I will switch from using the mail-support I do today with a web ticket system that requires the customer to verify their support period before creating a new ticket. This will not only increase a bit my revenue by making sure customers have valid support but will also help with scalability, organizing the support tickets and making sure each and every customer has his issue resolved (no more spam folder e-mails, no more accidentally marking an e-mail as read).
I start today: I have already submitted a new item for review on CodeCanyon. I will write a post about it and some cool Web Dev tricks I used to create a smooth UX a few weeks after it will be accepted and up for sale (so that I can also provide some sales numbers).

Let me know if you have any questions about me, my very ambitious plan, userTrack or any Web Dev related question in the comment section below.

So our journey begins, make sure to check the blog once or twice a month to see how my progress goes and whether I am heading in the right direction or went crying in a corner while re-thinking my life.

Author: Cristian Buleandră
Date: 12th March 2017

Wednesday, June 3, 2015

[JS] Running Phaser in Node.js


A new beginning

   It has been over 3 years without a post. I want to break this silence with this post, a post about how to run a Phaser game inside a NodeJS environment. This is the first post from a new series that will explain how to create a cross-platform real-time multiplayer game.

Cross-platform real-time multiplayer games in JavaScript

  1. Running a Phaser game inside a NodeJS environment - Part 1.
  2. Running a Phaser game inside a NodeJS environment - Part 2.
  3. Basic Socket.IO connections between client & server.
  4. Client-Server game state syncing.
  5. Interpolated syncing, or how to make things seem smooth.
  6. ... more to be added

Phaser game inside a NodeJS environment

How and why can you do it

   Running a game (at 60fps) inside a Node.js instance is not that hard. You just need a gameLoop function that is executed 60times a second and you can do that by using a setTimeout for example. Doing this will not block the event loop between frames but while a new frame is being computed (eg. the gameLoop function is being executed) the event loop is actually blocked but the time between frames is more than enough for Node to do its stuff.

   Phaser, being written in JavaScript, can be run directly in Node.js, but there are some things you have to handle:
  • Phaser requires a HTML DOM.
    • There is a jsdom package which creates a virtual DOM. The thing is, it's more than we need and is harder to install because of the contextify dependency. Due to the popularity of Node.js there is actually a package already created the does what we need without that contextify dependency jsdom-no-contextify.
  • Phaser requires a functional Canvas element.
    • I have created a mock canvas module which only adds the empty canvas functions that Phaser calls. This means that we don't have a real canvas, function calls will do nothing, but we need their declarations added so errors are not triggered.
    • An alternative was to install a real canvas (the node canvas package) but it is really difficult to install (actually 2/3 times I didn't even manage to install it). The advantage with having a mock canvas is that, by doing nothing on function calls, the resources used on the server would be fewer.
  • Phaser uses XMLHttpRequest to load assets. 
    • You need to actually load the sprite images so that their width and height can be retrieven.
    •  There is also a catch here: the XMLHttpRequest package works only via HTTP, but when you load resources in pixi you actually load it via an absolute file path (like file:///C:/img/asset.png) which won't work. Luckily there is a local-xmlhttprequest node package which handles this case.
    • Once you load an image you also need a way to get its dimensions (width/height). For this I used the package image-size.
For the client-server connection I have used, for which you have to include two packages:
  • Express (web framework)
  • (server framework, used for creating server-side sockets)
Now, another thing that you will learn in this series is how to use the same code both on the client and  the server. This will considerably cut the development time of a multiplayer game, as you only have to write the game engine once and only add some simple conditions to check if the environment is a client or a server. To be able to do this you have to:
  • Use RequireJS on both client & server. This means that you won't include all the files on the client by using <script> tags, because those are DOM specific which you include in your HTML file, but on Node you will have no HTML file. By using RequireJS you have a way to include JavaScript files on the client in the same way you do on the server.<script> tags, but by requiring them where they are needed.
  • I decided to use two different Phaser library files, one for client (the default one) and one for the server (where all the phaser dependencies described above are included). I will be using Phaser v2.2.2 because the new versions didn't seem to work with RequireJS (I will update this post when I will manage to include a newer phaser version). So, the server-side Phaser library is actually a custom build (I found no way to integrate image-size package into the Phaser loader without writing code directly in the load function).

Getting started

To get started, you have to:
  • Install WAMP (or another web server suitable for your platform). We'll use Apache to serve static files (like our game index.html) so we use Node.js only for the multiplayer part.
  • Install Node.js. This will automatically install npm which you'll use to easily install packages (node modules).
Now you should test that everything is installed correctly. First, create a folder in WAMP's www directory add an index.html file containing a basic HTML file or a Hello World message. When you navigate to http://localhost/yourDirectory you should see that message. This means that WAMP is working.

Now, let's test Node. All node applications must have a package.json file which describes the application (name, author, etc...), most importantly it's dependencies. To create a new app open the console at your folder's location (windows, in your folder: SHIFT+RIGHTCLICK->Open command window) and type npm init. Complete the name of the app and the rest of inputs (you can keep pressing enter to skip them all).

Let's see how node works by creating a simple server.
Create a js subfolder and an server.js file in it. In this file we will create the server and listen to a port.

Server.js file:
var app = require('express')();
var server = require('http').createServer(app);
var io = require('')(server);

var port = 3000;

console.log('Started, linstening on port:' + port);

Now, if you write in console node js/server.js to run the server you will get several errors. This is because we did not include the dependencies. For this we have to run the following npm commands:

npm install express --save
npm install --save
The --save part is included so that the dependencies are saved inside the package.json file. This way when you try to install your app from a package.json config you only have to type npm install and all the dependencies mentioned in the JSON file will be included.

Executing node js/server.js should now result in this message:

End of Part 1

This is all for the first part of this tutorial. You have learned what are the problems that you might encounter while trying to run Phaser in Node.js and what are the theoretical solutions for overcoming those problems. You have installed WAMP and Node.js and learned how to create a basic server.

In the next part I will explain, step by step, how to successfully run Phaser inside node and I will also post an archive containing a basic Phaser + Node app template.

If you have any suggestions for this post, or encounter problems following the steps described above, feel free to leave a comment.

Author: Cristian Buleandră
Posted on: 03 June 2015
Last updated: 03 June 2015

Wednesday, October 17, 2012

[JQ] Javascript particles system v2


Good news. I have created a brand new version of the old's particle system! Now, easier to implement, customizable and there's much more physics involved!


Saturday, August 25, 2012

[TIPS] HTML transparent background

If you are a webdesigner there is a big chance you have encountered this problem before: transparent backgrounds. In this post I will describe three methods to create transparent backgrounds using images, HTML or simply by using CSS.


Sunday, December 18, 2011

Free CSS3 horizontal menu classes

Long time no post :). I want to compensate with this post: I have created for you 6 CSS3 horizontal (linear) menu classes. There's a download button below. Hope you will like them :D.


Sunday, October 23, 2011

[AI] Quick Lightning Bolt Vector {CS5}

1 comment
In this tutorial I'll show you how to create a lightning bolt-like vector very easily. It's all about the zig-zag effect and the new CS5 "width tool".