sprite rotation demo
demonstrate usage of currentTransform.rotate
HTML
<script src="https://github.com/melonjs/melonJS/releases/download/4.0.0/melonJS.js"></script>
<!-- Canvas placeholder -->
<div id="screen"></div>
JavaScript
<!-- init the melonJS Library -->
me.boot();
<!-- game template -->
var game = {
// assets to preload
assets: [{
name: "logo",
type: "image",
src: "http://superpowers-html5.com/images/superpowers-logo.png"
}],
// Run on page load.
"onload": function() {
// Initialize the video.
if (!me.video.init(960, 640, {
wrapper: "screen",
scale: "auto"
})) {
alert("Your browser does not support HTML5 canvas.");
return;
}
// Initialize the audio.
me.audio.init("mp3,ogg");
// set and load all resources.
// (this will also automatically switch to the loading screen)
me.loader.preload(game.assets, this.loaded.bind(this));
},
// Run on game resources loaded.
"loaded": function() {
var PlayScreen = me.ScreenObject.extend({
// on reset event function
onResetEvent: function() {
// black background
me.game.world.addChild(new me.ColorLayer("background", "#202020"), 0);
var logo = new game.LogoEntity(345, 170,"logo");
me.game.world.addChild(logo, 1);
var maxAngle = 5;
var tween = new me.Tween(logo).to( {x:200, currentAngle:maxAngle}, 8000 ).onUpdate(function (val){console.log( logo.currentAngle,val*maxAngle,(1-val)*maxAngle)}).easing(me.Tween.Easing.Quadratic.InOut).repeat(Infinity).yoyo(true).start();
}
});
// set the "Play/Ingame" Screen Object
me.state.set(me.state.PLAY, new PlayScreen());
// switch to PLAY state
me.state.change(me.state.PLAY);
}
};
/**
* a basic sprite object
*/
game.LogoEntity = me.Entity.extend({
init: function(x, y, imageName) {
var image = me.loader.getImage("logo");
// call the super constructor
this._super(me.Entity, "init", [x, y, {
width:...