Creating Your First Project

Creating Your First Project

Step 1: Installation

To install Wage, you can either use Bower, or NPM.

To install Wage using NPM, simply type this into your console:

npm install -g wage

OR, you could install it using a normal Browser:

Fork this Github repository. You should now have a folder named "Wage": inside of it you can see a folder named "Build"; the only thing you have to do is copy and paste this directory wherever you want to put your project. Example: Copy and paste Build folder's content inside your folder "AmazingProject".

---

Step 2: Setup

Wage uses a console based system to make setup and project creation all the more easier!

To setup your first project using Wage's awesome-sauce console system, all you have to do is type:

wage create amazingProject

This should create a folder called "amazingProject" inside your base folder the one you ran the install code in, and the one you are on in your console right now

However, if you aren't using NPM, you are just using what you created in the first step, as no further creation processes are required.

---

Step 3: Code Away!

All that you need has been created now, so you don't have to worry about running anything else. (For now....)

Here is some explanations for the code inside your project's folder:

Preload: First of all, notice the "preload" method: this will be called before the scene creation, and will allow you to perform heavy calculation/operations just before the scene initialization. The "preload" method has a callback method, which you need to call in order to proceed in your app flow. Just for example, you can load json 3d models right here, and having them loaded when the scene is about to be created. The callback method will cause a few things. It will call the method "prepareScene" and "progressAnimation" method. To modify your preload, you will need to write:

preload = function(callback) {
    //your very own implementation
    callback();
};

prepareScene: This method has only a logic difference from the preload method. I decided to create this function in order to perform operations needed by the scene, just before its creation. So for example, you can create a complex particle system or modify a huge 3d model ( loaded by the preload method), so that the scene will render faster and your users will never be annoyed by a black screen waiting for something to happen. After the "prepareScene" method, Wage will call the "progressAnimation" method. To modify your prepareScene, you will need to write:

function prepareScene() {
    //your very own implementation
}

progressAnimation: This method is your custom animation on the loader, and you can do whatever you want to make you loader disappear. You can also create your custom loader, modifying the index.html file inside your simpleApp folder. The "progressAnimation" method will give you a callback method, which you will need to call in order to proceed the app flow. Your app is now ready to call the onCreate method. To modify your progressAnimation, you will need to write:

progressAnimation = function(callback) {
    //your very own implementation
    callback();
};

onCreate: This is the method that Wage will call just after the scene creation. Here, you will be able to add your meshes, and after that the main loop will start. Here, you can insert the code you saw before (when we created the box) : for each mesh, you can add a custom "_render" method (just as explained before). You don't have to add this custom method if you don't need to.

To add each mesh to the scene you will need to call:

var m = new Mesh(geometry, material);

Step 4: Deploy

Upon the finishing of the first iteration of your "amazingProject", you can then get down to running it and all of it's amazing components!

So, you have finished coding up the "amazingProject" and you are ready to show it off to all of your friends! To deploy, you simply gave to be in your project folder. Then run:

./run

This will run your project using a Python variation of server called "SimpleHTTPServer". Most of the time, it will run on port 10000, unless you decide to change that in the "run" file.

Step 5: Relax

At last, simply sit back and watch your hard work come to life!