constructor(options={}) {
super(options);
this._programmaticallyLoadedSprite = new hamonengine.graphics.sprites.sprite({
name: 'firstsprite'
});
//Fetch the preloaded image.
const preloadedImage = document.getElementById('preloaded-image');
this._staticallyLoadedSprite = new hamonengine.graphics.sprites.sprite({
image: preloadedImage,
dimensions: new hamonengine.geometry.rect(0, 0, 128, 128),
name: 'secondsprite'
});
...
}
/**
* 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.
const staticPromise = this._staticallyLoadedSprite.load();
const programmticallyPromise = this._programmaticallyLoadedSprite.load('../content/media/lion.png');
const meancingPromise = this._meancing.load('../content/media/Menacing.png');
//Wait for all images to load in parallel.
await staticPromise;
await programmticallyPromise;
await meancingPromise;
}
renderBasics1(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
this._programmaticallyLoadedSprite.draw(screen, elapsedTimeInMilliseconds, 50, 50);
this._staticallyLoadedSprite.draw(screen, elapsedTimeInMilliseconds, 200, 50);
screen.endPainting();
}
constructor(options={}) {
super(options);
this._programmaticallyLoadedSprite = new hamonengine.graphics.sprites.sprite({
name: 'firstsprite'
});
//Fetch the preloaded image.
const preloadedImage = document.getElementById('preloaded-image');
this._staticallyLoadedSprite = new hamonengine.graphics.sprites.sprite({
image: preloadedImage,
dimensions: new hamonengine.geometry.rect(0, 0, 128, 128),
name: 'secondsprite'
});
...
}
renderScaling(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
//Shrink the sprite (original size 128x128).
this._programmaticallyLoadedSprite.draw(screen, elapsedTimeInMilliseconds, 50, 50, 64, 64);
//Enlarge the sprite (original size 128x128).
this._staticallyLoadedSprite.draw(screen, elapsedTimeInMilliseconds, 200, 50, 150, 150);
screen.endPainting();
}
constructor(options={}) {
super(options);
...
this._meancing = new hamonengine.graphics.sprites.sprite({
dimensions: new hamonengine.geometry.rect(0, 0, 59, 57),
name: 'meancing'
});
}
renderMirroring(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
const textPadding = 5;
//Draw the original
this._meancing.draw(screen, elapsedTimeInMilliseconds, 50, 50);
screen.drawText('original', 50, 50 + this._meancing.height + textPadding);
//Disable logging for this demo, since creating a sprite will spam the console logs.
hamonengine.util.loggerlevel = LOG_TYPE.DISABLED;
//Mirror it.
const menacingMirror = this._meancing.clone();
menacingMirror.mirror();
menacingMirror.draw(screen, elapsedTimeInMilliseconds, 130, 50);
screen.drawText('mirrored', 130, 50 + menacingMirror.height + textPadding);
//Flip it.
const menacingFlip = this._meancing.clone();
menacingFlip.flip();
menacingFlip.draw(screen, elapsedTimeInMilliseconds, 50, 130);
screen.drawText('flipped', 50, 130 + menacingFlip.height + textPadding);
//Flip & mirror it.
const menacingFlipMirror = this._meancing.clone();
menacingFlipMirror.flip().mirror();
menacingFlipMirror.draw(screen, elapsedTimeInMilliseconds, 130, 130);
screen.drawText('mirrored & flipped', 130, 130 + menacingFlip.height + textPadding);
//Enable logging.
hamonengine.util.loggerlevel = LOG_TYPE.ALL;
screen.endPainting();
}
constructor(options={}) {
super(options);
...
this._meancing = new hamonengine.graphics.sprites.sprite({
dimensions: new hamonengine.geometry.rect(0, 0, 59, 57),
name: 'meancing'
});
}
renderTransformation(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
const textPadding = 5;
//Draw the original
this._meancing.draw(screen, elapsedTimeInMilliseconds, 50, 50);
screen.drawText('original', 50, 50 + this._meancing.height + textPadding);
//Disable logging for this demo, since creating a sprite will spam the console logs.
hamonengine.util.loggerlevel = LOG_TYPE.DISABLED;
//Rotate it.
const rotate1 = this._meancing.clone();
rotate1.rotate(Math.PI / 4);
rotate1.draw(screen, elapsedTimeInMilliseconds, 130, 50);
screen.drawText('rotated by 45', 130, 50 + rotate1.height + textPadding);
//Rotate it.
const rotate2 = this._meancing.clone();
rotate2.rotate(Math.PI / 2);
rotate2.draw(screen, elapsedTimeInMilliseconds, 250, 50);
screen.drawText('rotated by 90', 250, 50 + rotate2.height + textPadding);
//Rotate it.
const rotate3 = this._meancing.clone();
rotate3.rotate(Math.PI * 3 / 4);
rotate3.draw(screen, elapsedTimeInMilliseconds, 375, 50);
screen.drawText('rotated by 135', 375, 50 + rotate3.height + textPadding);
//Scale it.
let scaleSize = 0.5;
const scale1 = this._meancing.clone();
scale1.scale(scaleSize, scaleSize);
scale1.draw(screen, elapsedTimeInMilliseconds, 130, 140);
screen.drawText(`scaled by ${scaleSize}%`, 130, 140 + (scale1.height * scaleSize) + textPadding);
//Scale it.
scaleSize = 1.5;
const scale2 = this._meancing.clone();
scale2.scale(scaleSize, scaleSize);
scale2.draw(screen, elapsedTimeInMilliseconds, 250, 140);
screen.drawText(`scaled by ${scaleSize}%`, 250, 140 + (scale1.height * scaleSize) + textPadding);
//Scale it.
scaleSize = 2.0;
const scale3 = this._meancing.clone();
scale3.scale(scaleSize, scaleSize);
scale3.draw(screen, elapsedTimeInMilliseconds, 375, 140);
screen.drawText(`scaled by ${scaleSize}%`, 375, 140 + (scale1.height * scaleSize) + textPadding);
//Scale & Rotated.
scaleSize = 2.0;
const scaledRotated = this._meancing.clone();
scaledRotated.scale(scaleSize, scaleSize).rotate(Math.PI / 2);
scaledRotated.draw(screen, elapsedTimeInMilliseconds, 550, 50);
screen.drawText(`scaled by ${scaleSize}%`, 550, 50 + (scaledRotated.height * scaleSize) + textPadding);
screen.drawText('rotated by 135', 550, 65 + (scaledRotated.height * scaleSize) + textPadding);
//Enable logging.
hamonengine.util.loggerlevel = LOG_TYPE.ALL;
screen.endPainting();
}
constructor(options={}) {
super(options);
...
this._meancing = new hamonengine.graphics.sprites.sprite({
dimensions: new hamonengine.geometry.rect(0, 0, 59, 57),
name: 'meancing'
});
}
renderWrapping(screen, elapsedTimeInMilliseconds, enableWrapping=true) {
screen.beginPainting();
//Begin wrapping
screen.wrapVertical = screen.wrapHorizontal = enableWrapping;
//Disable logging for this demo, since creating a sprite will spam the console logs.
hamonengine.util.loggerlevel = LOG_TYPE.DISABLED;
const scaleSize = 1.5;
//0.75 = 1.5 * 0.5 (halve the sprite width to center, multiple by 1.5 to scale).
const scaleCenter = scaleSize * 0.5;
//Draw beyond the left edge of the screen.
const sprite1 = this._meancing.clone();
sprite1.scale(scaleSize, scaleSize);
sprite1.draw(screen, elapsedTimeInMilliseconds, screen.viewPort.x - (sprite1.width * scaleCenter), 25);
//Draw beyond the right edge of the screen.
const sprite2 = this._meancing.clone();
sprite2.scale(scaleSize, scaleSize).rotate(Math.PI);
sprite2.draw(screen, elapsedTimeInMilliseconds, screen.viewPort.width - (sprite2.width * scaleCenter), 200);
//Draw beyond the top edge of the screen.
const sprite3 = this._meancing.clone();
sprite3.scale(scaleSize, scaleSize).rotate(Math.PI/2);
sprite3.draw(screen, elapsedTimeInMilliseconds, 200, screen.viewPort.y - (sprite3.height * scaleCenter));
//Draw beyond the bottom edge of the screen.
const sprite4 = this._meancing.clone();
sprite4.scale(scaleSize, scaleSize).rotate(Math.PI*3/2);
sprite4.draw(screen, elapsedTimeInMilliseconds, 600, screen.viewPort.height - (sprite4.height * scaleCenter));
//End wrapping
screen.wrapVertical = screen.wrapHorizontal = false;
//Enable logging.
hamonengine.util.loggerlevel = LOG_TYPE.ALL;
screen.endPainting();
}
constructor(options={}) {
super(options);
...
this._meancing = new hamonengine.graphics.sprites.sprite({
dimensions: new hamonengine.geometry.rect(0, 0, 59, 57),
name: 'meancing'
});
}
renderWrapping(screen, elapsedTimeInMilliseconds, enableWrapping=true) {
screen.beginPainting();
//Begin wrapping
screen.wrapVertical = screen.wrapHorizontal = enableWrapping;
//Disable logging for this demo, since creating a sprite will spam the console logs.
hamonengine.util.loggerlevel = LOG_TYPE.DISABLED;
const scaleSize = 1.5;
//0.75 = 1.5 * 0.5 (halve the sprite width to center, multiple by 1.5 to scale).
const scaleCenter = scaleSize * 0.5;
//Draw beyond the left edge of the screen.
const sprite1 = this._meancing.clone();
sprite1.scale(scaleSize, scaleSize);
sprite1.draw(screen, elapsedTimeInMilliseconds, screen.viewPort.x - (sprite1.width * scaleCenter), 25);
//Draw beyond the right edge of the screen.
const sprite2 = this._meancing.clone();
sprite2.scale(scaleSize, scaleSize).rotate(Math.PI);
sprite2.draw(screen, elapsedTimeInMilliseconds, screen.viewPort.width - (sprite2.width * scaleCenter), 200);
//Draw beyond the top edge of the screen.
const sprite3 = this._meancing.clone();
sprite3.scale(scaleSize, scaleSize).rotate(Math.PI/2);
sprite3.draw(screen, elapsedTimeInMilliseconds, 200, screen.viewPort.y - (sprite3.height * scaleCenter));
//Draw beyond the bottom edge of the screen.
const sprite4 = this._meancing.clone();
sprite4.scale(scaleSize, scaleSize).rotate(Math.PI*3/2);
sprite4.draw(screen, elapsedTimeInMilliseconds, 600, screen.viewPort.height - (sprite4.height * scaleCenter));
//End wrapping
screen.wrapVertical = screen.wrapHorizontal = false;
//Enable logging.
hamonengine.util.loggerlevel = LOG_TYPE.ALL;
screen.endPainting();
}