Permalink
Browse files

Now using native cocos remote loading, lots of little tweaks.

  • Loading branch information...
1 parent e9405d6 commit 95fa632510faf472278d480ffe7f35a93435e341 John Conomikes committed Aug 29, 2011
@@ -1,46 +1,79 @@
var cocos = require('cocos2d');
var geom = require('geometry');
+var util = require('util');
-//TODO: Subclass this off a Value/Expression class or have it pulled in when needed by such a class
+// TODO: Subclass this off a Value/Expression class or have it pulled in when needed by such a class
var FractionRenderer = cocos.nodes.Node.extend({
- numerator: null,
- denominator: null,
- init: function(n, d) {
+ numerator: null, // The numerator of the fraction
+ denominator: null, // The denominator of the fraction
+ bgColor: null, // Color of the background rectangle
+ textColor: null, // Color of the numerator and denominator (TODO: Seperate colors for each?)
+ seperatorColor: null, // Color of the fraction bar between the numerator and denominator
+ init: function(opts) {
FractionRenderer.superclass.init.call(this);
- this.set('numerator', n);
- this.set('denominator', d);
+ this.set('numerator', 1);
+ this.set('denominator', 2);
- //Create the numerical labels for the numerator and denominator
- var opts = Object()
- opts["string"] = n
- var label = cocos.nodes.Label.create(opts)
- label.set('position', new geom.Point(0, -15))
+ this.set('bgColor', "#FFFFFF");
+ this.set('textColor', "#000000");
+ this.set('seperatorColor', "#AA2222");
+
+ // Set properties from the option object
+ util.each('numerator denominator bgColor textColor seperatorColor'.w(), util.callback(this, function (name) {
+ if (opts[name]) {
+ this.set(name, opts[name]);
+ }
+ }));
+
+ // Create the numerical labels for the numerator and denominator
+ var opts = Object();
+ opts["string"] = this.get("numerator");
+ opts["fontColor"] = this.get("textColor");
+ var label = cocos.nodes.Label.create(opts);
+ label.set('position', new geom.Point(0, -15));
this.addChild({child: label});
- opts["string"] = d
- label = cocos.nodes.Label.create(opts)
- label.set('position', new geom.Point(0, 15))
+ opts["string"] = this.get("denominator");
+ opts["fontColor"] = this.get("textColor");
+ label = cocos.nodes.Label.create(opts);
+ label.set('position', new geom.Point(0, 15));
this.addChild({child: label});
+
+ this.set('contentSize') = new geom.Size(40, 50);
},
- //Draw the background and the horizontal fraction bar
+ // Draw the background and the horizontal fraction bar
draw: function(context) {
- context.fillStyle = "#000000";
+ var size = this.get('contentSize');
+
+ context.fillStyle = this.get('bgColor');
context.beginPath();
- context.moveTo(20,25);
- context.lineTo(20,-25);
- context.lineTo(-20,-25);
- context.lineTo(-20,25);
+ context.moveTo(size.width / 2, size.height / 2);
+ context.lineTo(size.width / 2, size.height / -2);
+ context.lineTo(size.width / -2, size.height / -2);
+ context.lineTo(size.width / -2, size.height / 2);
context.closePath();
context.fill();
- context.strokeStyle = "#FF0000";
+ context.strokeStyle = this.get('seperatorColor');
context.beginPath();
- context.moveTo(10,0);
- context.lineTo(-10,0);
+ context.moveTo(size.height / 4, 0);
+ context.lineTo(size.height / -4, 0);
context.closePath();
context.stroke();
},
});
+// Static helper function to build the creation options object
+FractionRenderer.helper = function(n, d, b, t, s) {
+ var opts = new Object();
+ opts['numerator'] = n;
+ opts['denominator'] = d;
+ opts['bgColor'] = b;
+ opts['textColor' ] = t;
+ opts['seperatorColor'] = s;
+
+ return opts;
+}
+
exports.FractionRenderer = FractionRenderer
View
@@ -11,7 +11,12 @@ var LabelBG = cocos.nodes.Node.extend({
this.set('label', cocos.nodes.Label.create(opts));
this.addChild({child: this.get('label')});
- this.set('bgColor', bgColor);
+ if(opts.hasOwnProperty('bgColor')) {
+ this.set('bgColor', opts['bgColor']);
+ }
+ else {
+ this.set('bgColor', '#FFFFFF');
+ }
this.set('contentSize', this.get('label').get('contentSize'));
},
// Draws the background for the label
@@ -23,4 +28,16 @@ var LabelBG = cocos.nodes.Node.extend({
}
});
+// Static helper function to build the creation options object
+LabelBG.helper = function(string, fontColor, bgColor, fontSize, fontName) {
+ var opts = Object();
+ opts['string'] = string;
+ opts['fontColor'] = fontColor;
+ opts['bgColor'] = bgColor;
+ opts['fontSize'] = fontSize;
+ opts['fontName'] = fontName;
+
+ return opts;
+}
+
exports.LabelBG = LabelBG
View
@@ -0,0 +1,86 @@
+var cocos = require('cocos2d');
+var geom = require('geometry');
+var util = require('util');
+
+// Draws a pie chart
+var PieChart = cocos.nodes.Node.extend({
+ numSections:null, // Total number of pie slices
+ numFilled:null, // Number of filled pie slices
+ bgColor:null, // Color of the background
+ lineColor:null, // Color of the lines used to outlijne and mark each section
+ fillColor:null, // Color of the filled in sections
+ radius:null, // Size of the chart
+ init: function(opts) {
+ PieChart.superclass.init.call(this);
+
+ // Default values
+ this.set('numSections', 2);
+ this.set('numFilled', 1);
+ this.set('bgColor', "#FFFFFF");
+ this.set('lineColor', "#000000");
+ this.set('fillColor', "#A0A0A0");
+ this.set('radius', 10);
+
+ //Set properties from the option object
+ util.each('numSections numFilled bgColor lineColor fillColor radius'.w(), util.callback(this, function (name) {
+ if (opts[name]) {
+ this.set(name, opts[name]);
+ }
+ }));
+
+ // Explictly set contentSize so it plays nice with formating based on it
+ this.set('contentSize', new geom.Size(this.get('radius') * 2.4, this.get('radius') * 2.4));
+ },
+
+ // Draws the PieChart to the canvas
+ draw: function(context) {
+ var r = this.get('radius');
+
+ // Draw background
+ context.fillStyle = this.get('bgColor');
+ context.fillRect(r * -1.2, r * -1.2, r * 2.4, r * 2.4);
+
+ var step = Math.PI*2 / this.get('numSections');
+ var offset = Math.PI * 3 / 2 //This is so we draw with 'up' as our 0
+
+ // Draw the filled portion
+ context.fillStyle = this.get('fillColor');
+ context.beginPath();
+ context.arc(0, 0, r, offset, offset + step * this.get('numFilled'));
+ context.lineTo(0, 0);
+ context.lineTo(0, -1 * r);
+ context.closePath();
+ context.fill();
+
+ // Draw the outline
+ context.strokeStyle = this.get('lineColor');
+ context.beginPath();
+ context.arc(0, 0, r, 0, Math.PI*2);
+ context.closePath();
+ context.stroke();
+
+ // Draw the individual dividers
+ for(var i=0; i<this.get('numSections'); i+= 1) {
+ context.beginPath();
+ context.moveTo(0, 0);
+ context.lineTo(Math.sin(i*step)*r, Math.cos(i*step)*r*-1)
+ context.closePath();
+ context.stroke();
+ }
+ },
+});
+
+// Static helper function to build the creation options object
+PieChart.helper = function(sections, filled, bgColor, lineColor, fillColor, radius) {
+ opts = Object();
+ opts['numSections'] = sections;
+ opts['numFilled'] = filled;
+ opts['bgColor'] = bgColor;
+ opts['lineColor'] = lineColor;
+ opts['fillColor'] = fillColor;
+ opts['radius'] = radius;
+
+ return opts
+}
+
+exports.PieChart = PieChart
View
@@ -75,10 +75,11 @@ var Player = cocos.nodes.Node.extend({
var rot = this.get('rotation');
this.get('selector').set('rotation', rot * -1);
+ //Cocos works in degrees, Math works in radians, so convert
rot = rot * Math.PI / 180.0
// Keep the label in a fixed position beneath the car, regardless of car rotation
- var x = this.get('selectorX') * Math.cos(rot) + this.get('selectorY') * Math.sin(rot)
+ var x = this.get('selectorX') * Math.cos(rot) + this.get('selectorY') * Math.sin(rot)
var y = -1 * this.get('selectorX') * Math.sin(rot) + this.get('selectorY') * Math.cos(rot)
this.get('selector').set('position', new geom.Point(x, y));
View
@@ -6,25 +6,28 @@ var LabelBG = require('LabelBG').LabelBG;
// Represents a single question to be answered by the player
// TODO: Fix timing issue, question is answered at 92% distance,
-// so actual time/distance is 8% shorter/smaller than listed
+// so actual time/distance is 8% shorter/smaller than listed (just like hard drives)
+// TODO: Build with an options object to allow easier initialization when customizing away from default values
var Question = cocos.nodes.Node.extend({
correctAnswer: null, //The correct response
answeredCorrectly: null, //Stores if question has been correctly/incorrectly (null=not answered)
coneL:null, //Holds the left delimiter
coneR:null, //Holds the left delimiter
- timeElapsed:null, //Real time elapsed since start of question
- speed:null, //Speed in "units" of the player's car
+ timeElapsed:null, //Real time elapsed since start of question (including delimeterStaticTime)
+ speed:null, //Speed in "units"/second of the player's car
totalDist:null, //Distance in "units" player needs to cover before answering
coveredDist:null, //Distance in "units" covered thus far
+ delimeterStaticTime:null, //Duration that the question will remain static in the distance (seconds)
init: function(ans, d1, d2) {
Question.superclass.init.call(this);
// Initialize all variables
this.set('correctAnswer', ans);
this.set('timeElapsed', 0.0);
this.set('speed', 1000);
- this.set('totalDist', 5000);
+ this.set('totalDist', 5000 / 0.92); //0.92 is to account for the question being evaluated at 92% distance
this.set('coveredDist', 0);
+ this.set('delimeterStaticTime', 1);
// Create and display the question content
var opts = Object()
@@ -68,7 +71,8 @@ var Question = cocos.nodes.Node.extend({
var pc = 0;
// Creates a delay before the content starts to move
- if(te - 1 > 0) {
+ // TODO: Possibly vary the delay based on player's speed
+ if(te - this.get('delimeterStaticTime') > 0) {
var cd = this.get('coveredDist');
cd += this.get('speed') * dt;
this.set('coveredDist', cd);
@@ -99,4 +103,6 @@ var Question = cocos.nodes.Node.extend({
},
});
+// TODO: Write static helper for building an options object to initialize a question
+
exports.Question = Question
@@ -14,7 +14,7 @@ var QuestionList = BObject.extend({
this.set('questions', []);
this.set('current', -1);
this.set('intermissions', []);
- this.set('nextIntermission', 0);
+ this.set('nextIntermission', -1);
this.set('speed', 1000);
this.set('currentAnswer', 1);
@@ -27,6 +27,7 @@ var QuestionList = BObject.extend({
this.set('questions', list);
},
// Adds an intermission set at the current end of the question list
+ // TODO: Special case first intermission so we skip it and value starts directly on car
addIntermission: function(s) {
var list = this.get('intermissions');
list[list.length] = {selector: s, onQuestion: this.get('questions').length};
@@ -55,7 +56,7 @@ var QuestionList = BObject.extend({
this.set('nextIntermission', inter[0].onQuestion);
}
else {
- this.set('nextIntermission', -1);
+ this.set('nextIntermission', -2);
}
this.set('intermissions', inter);
}
Oops, something went wrong.

0 comments on commit 95fa632

Please sign in to comment.