So I recently re-released TweetBlaster as BotBlaster dropping twitter integration. I found in the end the twitter integration slowed down the game. So the new version is much faster. I will also be adding ad support via unity3d ad system. I have also decided to make the game free. I will also be releasing an iOS and Amazon App versions soon. I may in the future add support for in app purchases like weapons etc.. So moving on I have decided to concentrate my efforts on creating a new game system for unity which might take longer but reaps better rewards. One flaw of my previous approach to video game development was the need for custom built models. This is a slow process which sometime requires purchasing assets from other professionals to use. My next game will avoid this entirely. I plan on creating all the art assets algorithmically. All graphics for the next game I will create myself. In bot blaster there is also a lack of a story line this will not happen with SkullCraft. SkullCraft will have a story to compliment the game play. I want the next game to have 3 game genre types available within the levels. Those types will include racing game, accelerometer controlled level, and RPG. I want to first develop the game in webGL using voxelJS. I would then like to port over what I have created with voxelJS to unity3d. I would also like to make this library have assets that can be easily dropped in to create cool effects and games quickly. I plan on hosting all the changes of the desktop webGL version on github so it will be open source. So this post is only the first of many because this game will take me a significant amount of time to develop. I have also been trying to create more art work with Processing in my spare time. So my blog might sometimes begin to discuss utilizing processing to create algorithmic art and taking those creations from the computer to the canvas. I have also been keeping these sketches up on github so feel free to explore my sketch book.

This demo uses the voxelJS. In this example you will see how to use processing to create textures for 3d objects within voxelJS. It is important to realize that voxelJS is built on top of threeJS so most of all the features you are already familiar with work within voxelJS. VoxelJS also has a post processing effects library voxel-pp. VoxelJS also utilizes nodeJS so the work flow is a little different. When you work with voxelJS you will also be using nodeJS and npm. NPM is node package manager which is really a repository for node modules. Node is easy to use and speeds up development. People familiar with ruby on rails and gems will be able to pick this up easily. One of the most important files within the project is the package.json that file declares all of the modules that are necessary for your project. While nodeJS is also a server technology it can also be utilized to build javascript projects quickly that do not require the use of a node server. There are numerous video tutorials that will step you through the use of nodeJS with voxelJS.

This demo was fun to create because I got to tie together several different technologies to create something I previously imagined. It is fun to use processing with hype and it is fun to utilize it within threeJS. I know that I can create a variety of special fx rapidly utilizing these methods. In my opinion the way to go is to load all of the processing code via javascript. When you go to the processingJS website they do have easier ways to lazy load the scripts although what we will be using. ProcessingJS compiles your processing file to javascript so if you want you can write the processing entirely in javascript or mixin some javascript functions.

var $projDiv = $('#pContain');
var canvasRef = $('');
p1 = new Processing.loadSketchFromSources('skullz', ['scripts/skullz.pde']);
$projDiv.append(canvasRef); 

//this code is called to initialize the processing code 

canvasCallback.add(prCodeInit);
canvasCallback.add(createText);
canvasCallback.fire('createText');

//this code is used to wrap the 2d canvas to the threejs model
wrapTexture = function(){
      canvas = document.getElementById('skullz');
      texture = new window.game.THREE.Texture(canvas);
      texture.needsUpdate = true;

      material = new window.game.THREE.MeshBasicMaterial({
        overdraw:true, map:texture, side:window.game.THREE.DoubleSide, transparent: true
      });
      texture.wrapS = texture.wrapT = window.game.THREE.RepeatWrapping;
    }

// in the code you will see the processing pde files that are called 

Thoughts on the future. I may also port this to away3D. It is no secret that I love ActionScript and this might be cool and run fast on Air Mobile as well but my first quest is to get it done for webGL then port it to Unity3d and then we will see where things head from there. I also believe that with the next version of Android we will see webGL support within Android and I am sure iOS can’t be far behind. With webGL I know I have the most flexibility because I can use javascript canvas to create animated textures this is not an easy task within unity3d if you do not have a pro version. That might be an advantage when it comes to Air but the most important thing beyond story line and graphics / style, is game play and performance. It has to perform well to be played. #perfomanceisking