Hi, I have forked @Will’s Flappy Bird, and I am having trouble with centering.
As you progress, you gain score +1 per pipe passed. ‘Digit 2’ is the only number shown if you have < 9 points.
If you surpass 9, ‘Digit 1’ is enabled, putting it to the left of ‘Digit 2’, and if you surpass 99, then ‘Digit 0’ is enabled, putting it to the left of ‘Digit 1’.
But after you get < 9 points, the score displayed at the top becomes uncentered because ‘Digit 1’ displays to the left, and the same for < 99. How can you recenter this if another texture is displayed? Here is code:
var score = pc.createScript('score');
Score.attributes.add('center', { type: 'boolean', default: false });
Score.attributes.add('name', { type: 'string', default: 'score' });
Score.attributes.add('zero', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('one', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('two', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('three', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('four', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('five', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('six', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('seven', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('eight', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('nine', { type: 'asset', assetType: 'material', array: false });
Score.attributes.add('blank', { type: 'asset', assetType: 'material', array: false });
function splitNumber(number, result) {
var numberStr = number.toString();
result.length = 0;
for (var i = 0, len = numberStr.length; i < len; i++) {
result.push(+numberStr.charAt(i));
}
}
// initialize code called once per entity
Score.prototype.initialize = function() {
var app = this.app;
var digits = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'blank'];
this.materials = [];
for (var i = 0, len = digits.length; i < len; i++) {
var material = this[digits[i]].resource;
this.materials.push(material);
}
var splitScore = [];
app.on('ui:' + this.name, function (score) {
splitNumber(score, splitScore);
var scoreLength = splitScore.length;
var displayLength = this.entity.getChildren().length;
while (splitScore.length < displayLength) {
splitScore.unshift(10);
}
for (var i = 0; i < displayLength; i++) {
var e = this.entity.findByName('Digit ' + i);
e.model.material = this.materials[splitScore[i]];
}
}, this);
};
function splitNumber(number, result) {
var numberStr = number.toString();
result.length = 0;
for (var i = 0, len = numberStr.length; i < len; i++) {
result.push(+numberStr.charAt(i));
}
}
// initialize code called once per entity
Score.prototype.initialize = function() {
var app = this.app;
var digits = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'blank'];
this.materials = [];
for (var i = 0, len = digits.length; i < len; i++) {
var material = this[digits[i]].resource;
this.materials.push(material);
}
var splitScore = [];
app.on('ui:' + this.name, function (score) {
splitNumber(score, splitScore);
var scoreLength = splitScore.length;
var displayLength = this.entity.getChildren().length;
while (splitScore.length < displayLength) {
splitScore.unshift(10);
}
for (var i = 0; i < displayLength; i++) {
var e = this.entity.findByName('Digit ' + i);
e.model.material = this.materials[splitScore[i]];
}
}, this);
};