Planning:

Throughout my project I went through numerous stages of planning. One of the planning techniques I used (that Simon my tutor suggested) which proved to be most helpful was my section list detailing the core features, which were required, and then also supporting features, which would complement my core features and improve my project. This was my list:

Core Features:

  • Leap motion controls
  • Camera Movement and animations
  • Physics engine
  • 3D space coded (primary level: Solar system)
  • Objects coded (movement, graphics, spawn and effect)
  • Interactivity with objects (avatar growth etc)
  • Website
  • Menus
  • Minimal graphics
  • sound

Supporting features

  1. Smooth camera transitions, smooth scaling objects and avatar
  2. Tutorial / level guide
  3. Keyboard controls
  4. Difficulty levels(lives – time limit, decrease in size))
  5. 3d graphics and filters for: movement, particles in space, scenery (e.g. planets or large objects to avoid), avatar (possibility of choice of colour or the like)
  6. Score board (local to start, data base would enhance greatly)
  7. Multiple levels, earths atmosphere, cellular (microscopic particles), Galactic (multiverses Giant gas clouds planets and stars) earths, Atmosphere (more difficult for models will be needed)

Combining this section list with the calander I have on my wall near my computer, I was able to have a make shift GANTT chart. Although I did not specifically write time brackets for each section, I was constantly aware of how many days I had left until my hand in and how long I assumed each section was going to take me. Using this method I was able to complete my core features with some time to spare and was then able to implement some of the supporting features I wanted to include.

Page of code:

Although this is not a full page of code, this is most likely the most suitable thing to include as a replacement (if i were to include a whole page of code to accurately show the depth of development then i would want to include my index file which is over 2,000 lines long so i feel that would be to much).

This code is the create moon function that i wrote, this this function i can create a moon with various sizes, masses and positions onto any object that ive already placed in my scene:

function createMoon(moonSize, moonMass, moonX, moonY, moonZ, targetPlanet){
var moonMat = moonVisMaterial[Math.floor(Math.random()*moonVisMaterial.length)];
var m = moonsPlanet.length;
var posX = targetPlanet.position.x;
var posY = targetPlanet.position.y;
var posZ = targetPlanet.position.z;

moonPlanetGeometry = new THREE.SphereGeometry(moonSize, 20, 15);
moonPlanetMaterial = moonMat;
moonPlanetMesh[m] = new THREE.Mesh(moonPlanetGeometry, moonPlanetMaterial);

moonPlanetShape[m] = new CANNON.Sphere(moonSize);
moonsPlanet[m] = new CANNON.RigidBody(moonMass, moonPlanetShape[m]);
moonsPlanet[m].position.set(posX + moonX,posY+moonY,posZ+moonZ);
moonsPlanet[m].velocity.set(0,0,8);
moonsPlanet[m].linearDamping = 0.0;
moonsPlanet[m].angularVelocity.set(Math.random()/2,Math.random(),Math.random()/2);
//collision filtergroup and maskgroups(who it can collide with)
moonsPlanet[m].collisionFilterGroup = objectsGrp;
moonsPlanet[m].collisionFilterMask = objectsGrp;
world.add(moonsPlanet[m]);
planetsMoonsContainer.add(moonPlanetMesh[m]);
moonsPlanet[m].preStep = function(){

moonsPlanet[m].force.set(0,0,0.01);
//get the vector point from the moon to the planet center
var moonsPlanet_to_planetsMoon = new CANNON.Vec3(targetPlanet.position.x -this.position.x,targetPlanet.position.y-this.position.y,targetPlanet.position.z-this.position.z);

//get distance from planet to moon
//var distance = moonsPlanet_to_planetsMoon.norm();
//force is pointing in the moon-plnaet direction
moonsPlanet_to_planetsMoon.normalize();
//Math.pow is to the power of (times the number by its self, however many times the 2nd integer states in this case 2)

moonsPlanet_to_planetsMoon.mult(/*6500/Math.pow(distance,2)*/60, this.force);
};

}

I am also going to include my collide function in this post to show a separate area of development that i have coded. The collide function handles everything from avatar scale changes(by calling my tweens) to the removal of the correct objects Cannon.js rigid body and Three.js mesh: 

function colliderFunctions() {
//var p = planets.length;
avatarBody.addEventListener(“collide”, function(e) {

var scaleAmount = e.with.shape.radius / (avatar.scale.x * scaleValue);
if( e.with.shape.radius < newMass){
playHitSmaller();
//for testing
/*
if (ifColisionYet ==false){
scaleAmount = 3.5;
ifColisionYet = true;
}*/
scaleAvatarPlus.x = scaleAvatarPlus.y = scaleAvatarPlus.z += scaleAmount;
//scaleTween
tweenAvatarScalePlus.start();
//new avatar Phys Body
newMass = avRadius * avatar.scale.x;

//remove HitObj Phy

if( e.with == planets[planets.indexOf(e.with)]){
var objHit = planets.indexOf(e.with);
planetsContainerArea1.remove(planetsMesh[objHit]);
} else if (e.with == planetsMoon[planetsMoon.indexOf(e.with)]){
var objHit = planetsMoon.indexOf(e.with);
planetsMoonsContainer.remove(planetMoonMesh[objHit]);
} else if (e.with == moonsPlanet[moonsPlanet.indexOf(e.with)]){
var objHit = moonsPlanet.indexOf(e.with);
planetsMoonsContainer.remove(moonPlanetMesh[objHit]);
} else if (e.with == moons2Planet[moons2Planet.indexOf(e.with)]){
var objHit = moons2Planet.indexOf(e.with);
planetsMoonsContainer.remove(moon2PlanetMesh[objHit]);
} else if (e.with == mercuryPhysObj){
solarSystemContainer.remove(mercuryMesh);
} else if (e.with == venusPhysObj){
solarSystemContainer.remove(venusMesh);
} else if (e.with == earthPhysObj){
solarSystemContainer.remove(earthMesh);
} else if (e.with == marsPhysObj){
solarSystemContainer.remove(marsMesh);
} else if (e.with == jupiterPhysObj){
solarSystemContainer.remove(jupiterMesh);
} else if (e.with == saturnPhysObj){
solarSystemContainer.remove(saturnMesh);
} else if (e.with == uranusPhysObj){
solarSystemContainer.remove(uranusMesh);
} else if (e.with == neptunePhysObj){
solarSystemContainer.remove(neptuneMesh);
} else if (e.with == plutoPhysObj){
solarSystemContainer.remove(plutoMesh);
} else if (e.with == sunPhysObj){
solarSystemContainer.remove(sunMesh);
$(renderer.domElement).fadeOut(4000);
toggle();
cosmosCanStart == false
$(“#curtain”).fadeIn(500,function(){});
$(“#curtain #loadbar”).fadeIn(2500,function(){});
$(‘#curtain #loadbar #intro’).fadeIn(2500,function(){});
document.getElementById(“intro”).innerHTML = “Congratulations, you conquered the solar system! <br/><br/> Click here to try beat your score, or try on a different difficulty. <br/><br/> You achieved a highscore of: ” + highScore +” in: “+elapsedTime+” secounds <br/> “
$(‘#intro’).css({width: WIDTH, height: HEIGHT}).one(‘click’, function(e) {
location.reload();

});
cancelAnimationFrame(runScene);
}
world.remove(e.with);
} else if( e.with.shape.radius > newMass) {
playHitLarger();
if (Date.now() – lastCollide > 1000){
lives -= 1;
lastCollide = Date.now();
scaleAvatarMinus.x = scaleAvatarMinus.y = scaleAvatarMinus.z -= scaleAmount/difficulty;
tweenAvatarScaleMinus.start();
newMass = avRadius * avatar.scale.x;
world.remove(avatarBody);
avatarColliderMesh(newMass);
}
}
if (camStage !== 1 && newMass >= 3.5 && newMass <= 7 ){
tweenCam1.start();
playCameraPos();
tweenCamLookAt.start();
camStage = 1;
scaleValue = 35;
avatarLevel = 1200;
if(easy == true){
document.getElementById(“score”).style.color = ‘#47784D’;
}
} else if (camStage !== 2 && newMass >= 7 && newMass <= 13 ){
tweenCam2.start();
playCameraPos();
camStage = 2;
scaleValue = 20;
avatarLevel = 1500;
if(easy == true){
document.getElementById(“score”).style.color = ‘#B52BBD’;
}
} else if (camStage !== 3 && newMass >= 13 && newMass <= 17 ){
tweenCam3.start();
playCameraPos();
camStage = 3;
scaleValue = 10;
avatarLevel = 1800;
if(easy == true){
document.getElementById(“score”).style.color = ‘#FFFF19’;
}
} else if (camStage !== 4 && newMass >= 17 && newMass <= 25 ){
tweenCam4.start();
tweenCamLookAt2.start();
playCameraPos();
camStage = 4;
scaleValue = 4;
avatarLevel = 2000;
if(easy == true){
document.getElementById(“score”).style.color = ‘#FFFF19’;
}
} else if (camStage !== 5 && newMass >= 25){
tweenCam5.start();
tweenCamLookAt3.start();
playCameraPos();
camStage = 5;
scaleValue = 0.5;
avatarLevel = 2500;
if(easy == true){
document.getElementById(“score”).style.color = ‘#FFFF19’;
}
}
if(lives <= 0){
controlNodes.lives.innerHTML = lives;
$(renderer.domElement).fadeOut(4000);
toggle();
cosmosCanStart == false
$(“#curtain”).fadeIn(500,function(){});
$(“#curtain #loadbar”).fadeIn(2500,function(){});
$(‘#curtain #loadbar #intro’).fadeIn(2500,function(){});
document.getElementById(“intro”).innerHTML = “Oh no… You ran out of lives <br/><br/> Click here to try again! <br/><br/> You played for: “+elapsedTime+” secounds <br/>and achieved a highscore of: ” + highScore
$(‘#intro’).css({width: WIDTH, height: HEIGHT}).one(‘click’, function(e) {
location.reload();

});
cancelAnimationFrame(runScene);
}
});
}

Collaborations

Name: Andy Joyce

Role:   Physics Consultant

Andy asked me to collaborate on his project, to help him with the physics within Toast the Most. I have done a fair amount of work with physic and enjoy figuring out the maths puzzle that come alongside it so i was happy to lend a helping hand. The main problem that andy faced was with the jump of his character because the character doesnt move but the scene moves behind it this proved to be fairly tricky. After a couple of days of work we managed to write a script to the standard that Andy was happy with.

 

Name: Louie Babb

Task:

Similarly to how Louie contributed to my project, i did the same for his. Considering that we live together we were always around to discuss our projects meaning we could both talk over every aspect of our projects throughout the development processes. Providing second opinions on the work we had produced and our plans for the next stage of development. Keeping each other motivated and encouraging each other to persist with the difficult tasks and long nights ahead of us.

Collaborators

Name: Andy Joyce

Task: Web Design 

Through his time at bournemouth and his career at zeeta andy has had to develop his design skills to a much higher standard than mine. Being a coder through and through i struggle with the motivation to start web design, i am able enough to tell whether something looks good or not but sometimes have a lack of ideas. Andy worked with me over a couple of days on a consultancy basis, whenever i had a problem or was stuck for an idea andy would help me overcome my problem. With his help i was able to produce a web design that looked clean and fitted my project so i am very happy with his support!

Score 5/5

 

Name: Louie Babb

Task:

Me and Louie live together so throughout the course of our project we have both been available to talk over every aspect of concept develop, planning and technical development. Very regularly after a long day and nights coding and development we could visit each others rooms and talk over the days work, showing each other our progress and asking for the others opinions. We would also talk over breakfast of our plans for work for the day and encourage and motivate each other to continue working when either of us had a lack of motivation. Louie has been and invaluable resource throughout my project, i don’t believe that without his second opinion of many aspects of my project, that i would of been able to produce the level of work that i have achieved.

Score 5/5

Conclusion:

Through the course of the project and blog my development skills have improved tenfold I have transgressed from near enough a novice at JavaScript and game development to being completely comfortable with the syntax and have also learnt four separate libraries and their functions.

As my project progressed through my spiral development cycle my project as a whole also developed, as it became clear what was possible with my libraries some of my game objects evolved alongside them. Taking my time constraints into account I realised that some of my aim were unachievable, such as black holes to avoid. However overall I am very happy with my progress throughout this project as well as the end product that I have managed to produce. I have impressed myself with the amount of dedication and time I managed to commit to this project. Toward the end of my project the speed at which I have been able to solve problems increased dramatically and the frequency at which they arose also dropped considerably for my knowledge of the syntax had also become much more adept.

Taking a step away from the project its self I am also extremely happy with the leap my developing skills have managed to take I now feel confident in my own ability as a coder and feel with the right motivation I will be able to progress my knowledge even further into any aspects of coding. After university when looking for a job I feel that I will be able to walk in to a job interview with confidence in myself and my ability to be flexible enough to fit into any kind of working environment.

User testing:

Throughout my project I conducted various user testing, I had my peers use my project and view my textures and game elements. A couple of the most important changes I made from these tests were:

firstly my avatar shader, once I had all of my planet and comet textures in my scene, these tests made it apparent that the avatar graphic no longer fitted within my scene. So I created a new shader for my avatar that fit the scene a whole lot more:

Image

Another aspect that was improved by my user testing was the starting movement speed the value started at 0.01 but with an increase to 0.015 it was much easier for new users to start off enjoying my game straight away. The comments said that even though it still wasn’t so easy to get used to the controls it was more fun because it wasn’t for lack of movement that it was hard, it was the more the users skill that held them back.

Loading Screen check if loaded:

This code works as expected the loaded variable increases as the files finish loading.

The next step is to check when the loading is done and then append a button for the user to press to start the scene and call the init function.

To check if the loading is done you simply need to check that the loaded var is greater than or equal to the totalNeededToLoad var.

The only thing left to do is create a visual for the loading bar. This can be done through css, making a bar with its width equal to 100% divided by totalNeededToLoad and then as each file loads increment the width by this found fraction.

Loading screen creation:

Whilst examining other online games I have picked up some knowledge of how to create my own loading screen and loading functions.

The way I’m going to attempt this is by setting up variables such as totalNeededToLoad and Loaded, then I will increment Loaded variable each time a file has finished loading. For the sound files this code will go inside my buffer function and inside the textureLoader.load(‘fileName’, function(){ loaded++ } for my image files.

Loading screen research:

I have been searching around for way of creating a loading screen. Nearly every game has a loading screen, but there does not seem to be a set way of implementing it. Three.js has a loading screen scene type of thing but you need to create a two separate scenes, one for the loading and then the main scene that can be initiated after all of the files have been loading. This seems overly complicated and wont add much value to my project but will consume a lot of valuable time at this point.

From all of this research I have decided that I may be able to create my own loading screen.