constructor(options = {}) {
super(options);
//Sprite using a dyanmically loaded image.
this._normalSprite = new hamonengine.graphics.sprites.sprite({
name: 'firstsprite'
});
...
const blendingTypes = BLENDING_OPS.toArray();
this._blendingTests = [];
for (let x = 0; x < blendingTypes.length; x++) {
this._blendingTests.push(new hamonengine.graphics.sprites.sprite({
dimensions: new hamonengine.geometry.rect(0, 0, 128, 128),
name: 'blendingTest' + x
}));
}
...
}
async onloadResources() {
//Unlike the polygon demos, this demo requires overloading the onLoadResources event.
//This event is used to make sure all necessary resources are loaded before any screens are rendered.
//Note that images can load at anytime regardless of the state of the DOM, javascript or CSS files that have loaded.
//If images are not cached it can take the browser longer to download these images and the hamon engine must wait for these resources to load before rendering.
//When dealing with images it is far more efficient to use spritesheets to load a collection of images, especially if they are small.
let imagePromises = [];
...
this._blendingTests.forEach(sprite => imagePromises.push(sprite.load('../content/media/lion.png')));
//Wait for all images to load and process.
await Promise.all(imagePromises);
let blendOp = 0;
this._blendingTests.forEach(sprite => {
sprite.blendColor(190, 120, 255, 0, blendOp);
const lionSprite = this._spriteSheet.getSprite('lion');
lionSprite.blendColor(190, 120, 255, 0, blendOp);
this._spriteSheetBlendingTests.push(lionSprite);
blendOp++;
});
...
}
renderBasics1(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
const step = 64 + 25;
this._normalSprite.draw(screen, elapsedTimeInMilliseconds, 0, 0, 64, 64);
screen.drawText('noblend', 0, 70);
const blendingTypeNames = BLENDING_OPS.toKeyArray();
for(let i = 0; i < this._blendingTests.length; i++) {
this._blendingTests[i].draw(screen, elapsedTimeInMilliseconds, ((i + 1) * step), 0, 64, 64);
screen.drawText(blendingTypeNames[i], ((i + 1) * step), 70);
}
screen.endPainting();
}
constructor(options = {}) {
super(options);
...
this._spritesheetMetadataUrl = options.spritesheetMetadataUrl;
this._spriteSheet = new hamonengine.graphics.sprites.spritesheet();
this._spriteSheetBlendingTests = [];
...
}
//--------------------------------------------------------
// Internal Events
//--------------------------------------------------------
/**
* An internal event that occurs when attempting to load resources.
* @returns {object} a promise that the resource has loaded successfully.
*/
async onloadResources() {
//Unlike the polygon demos, this demo requires overloading the onLoadResources event.
//This event is used to make sure all necessary resources are loaded before any screens are rendered.
//Note that images can load at anytime regardless of the state of the DOM, javascript or CSS files that have loaded.
//If images are not cached it can take the browser longer to download these images and the hamon engine must wait for these resources to load before rendering.
//When dealing with images it is far more efficient to use spritesheets to load a collection of images, especially if they are small.
let imagePromises = [];
...
imagePromises.push(this._spriteSheet.load(this._spritesheetMetadataUrl));
this._blendingTests.forEach(sprite => imagePromises.push(sprite.load('../content/media/lion.png')));
//Wait for all images to load and process.
await Promise.all(imagePromises);
let blendOp = 0;
this._blendingTests.forEach(sprite => {
sprite.blendColor(190, 120, 255, 0, blendOp);
const lionSprite = this._spriteSheet.getSprite('lion');
lionSprite.blendColor(190, 120, 255, 0, blendOp);
this._spriteSheetBlendingTests.push(lionSprite);
blendOp++;
});
...
}
renderBlending(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
const step = 64 + 25;
this._normalSprite.draw(screen, elapsedTimeInMilliseconds, 0, 0, 64, 64);
screen.drawText('normal', 0, 70);
const blendingTypeNames = Object.entries(BLENDING_OPS);
for(let i = 0; i < this._spriteSheetBlendingTests.length; i++) {
this._spriteSheetBlendingTests[i].draw(screen, elapsedTimeInMilliseconds, ((i + 1) * step), 0, 64, 64);
screen.drawText(blendingTypeNames[i][0], ((i + 1) * step), 70);
}
screen.endPainting();
}
constructor(options = {}) {
super(options);
//Sprite using a dyanmically loaded image.
this._normalSprite = new hamonengine.graphics.sprites.sprite({
name: 'firstsprite'
});
...
this._counter = 0;
}
async onloadResources() {
//Unlike the polygon demos, this demo requires overloading the onLoadResources event.
//This event is used to make sure all necessary resources are loaded before any screens are rendered.
//Note that images can load at anytime regardless of the state of the DOM, javascript or CSS files that have loaded.
//If images are not cached it can take the browser longer to download these images and the hamon engine must wait for these resources to load before rendering.
//When dealing with images it is far more efficient to use spritesheets to load a collection of images, especially if they are small.
let imagePromises = [];
imagePromises.push(this._normalSprite.load('../content/media/lion.png'));
...
//Wait for all images to load and process.
await Promise.all(imagePromises);
...
this.redShift = this._normalSprite.clone();
this.greenShift = this._normalSprite.clone();
this.blueShift = this._normalSprite.clone();
this.alphaShift = this._normalSprite.clone();
}
renderColorChannel(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
const step = 64 + 25;
this._normalSprite.draw(screen, elapsedTimeInMilliseconds, 0, 0, 64, 64);
screen.drawText('normal', 0, 70);
this.redShift.draw(screen, elapsedTimeInMilliseconds, 1 * step, 0, 64, 64);
screen.drawText('red', 1 * step, 70);
this.greenShift.draw(screen, elapsedTimeInMilliseconds, 2 * step, 0, 64, 64);
screen.drawText('green', 2 * step, 70);
this.blueShift.draw(screen, elapsedTimeInMilliseconds, 3 * step, 0, 64, 64);
screen.drawText('blue', 3 * step, 70);
this.alphaShift.draw(screen, elapsedTimeInMilliseconds, 4 * step, 0, 64, 64);
screen.drawText('alpha', 4 * step, 70);
screen.endPainting();
}
/**
* An onProcessingFrame event that is triggered when a single frame is being processed before drawn.
* @param {number} elapsedTimeInMilliseconds since the last frame.
*/
onProcessingFrame(elapsedTimeInMilliseconds) {
this._counter = (this._counter + (0.001 * elapsedTimeInMilliseconds)) % Math.PI2;
const colorShift = Math.sin(this._counter);
this.redShift.adjustColorChannel(colorShift, 0, 0);
this.greenShift.adjustColorChannel(0, colorShift, 0);
this.blueShift.adjustColorChannel(0, 0, colorShift);
this.alphaShift.adjustColorChannel(1.0, 1.0, 1.0, colorShift);
}