Vibrant Recycling Newspaper Article
The Pioneiro newspaper published an interesting article about recycling, mentioning the game Vibrant Recycling!
Check out the full article below (article in Portuguese):
// Old Code -> New Code debugPanel -> me.debug.Panel me.Sprite.resize() -> me.Sprite.scale() me.PolyShape -> me.Polygon me.game.world.collide -> me.collision.check
// Before melonJS 2.0 - Body has only one shape var bounds = this.body.getShape().bounds; // After melonJS 2.0 - Body has only one shape, see index = 0 var bounds = this.body.getShape(0).bounds;The functions flipX and flipY have been removed from me.Entity and me.Body and are available only through the entity renderable component:
// Before melonJS 2.0 game.Entity = me.Entity.extend({ init: function(x, y, settings){ // Call the constructor this._super(me.Entity, 'init', [x, y , settings]); // Set the entity renderable this.renderable = game.texture.createSpriteFromName("sign.png"); // Check for entity renderable flip - passed as constructor param this.flipX(settings.flip); } }); // After melonJS 2.0 game.Entity = me.Entity.extend({ init: function(x, y, settings){ // Call the constructor this._super(me.Entity, 'init', [x, y , settings]); // Set the entity renderable this.renderable = game.texture.createSpriteFromName("sign.png"); // Check for entity renderable flip - passed as constructor param this.renderable.flipX(settings.flip); } });
// Before melonJS 2.0 var entity = me.Entity.extend({ init: function(x, y, settings) { // Call the constructor this._super(me.Entity, 'init', [x, y , settings]); // Set the default velocity this.body.setVelocity(3, 15); // Set the collision callback function this.body.onCollision = this.onCollision.bind(this); }, // Update logic update: function(dt) { // Change velocity this.body.vel.x -= this.body.accel.x * me.timer.tick; // Apply physics to the body (this moves the entity) this.body.update(); // Handle collisions against other shapes me.collision.check(this, true, this.collideHandler.bind(this), true); this._super(me.Entity, "update", [dt]); return true; }, // Collision handler collideHandler: function(response) { // Check for collision with enemy if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) { // Change velocity this.body.vel.y -= this.body.maxVel.y * me.timer.tick; // Change position this.pos.x -= 20; // Update the entity bounds since we manually changed the position this.updateBounds(); } }, // Collision callback onCollision: function(res, obj) { // Disable collision this.body.setCollisionMask(me.collision.types.NO_OBJECT); // Remove from game me.game.world.removeChild(this); } });
// After melonJS 2.0 var entity = me.Entity.extend({ init: function(x, y, settings) { // Call the constructor this._super(me.Entity, 'init', [x, y , settings]); // Set the default velocity this.body.setVelocity(3, 15); }, // Update logic update: function(dt) { // Change velocity this.body.vel.x -= this.body.accel.x * me.timer.tick; // Apply physics to the body (this moves the entity) this.body.update(); // Handle collisions against other shapes me.collision.check(this); this._super(me.Entity, "update", [dt]); return true; }, // Collision callback onCollision: function(response, other) { // Check for collision with enemy if (other.body.collisionType === me.collision.types.ENEMY_OBJECT) { // Change velocity this.body.vel.y -= this.body.maxVel.y * me.timer.tick; // Change position this.pos.x -= 20; // Update the entity bounds since we manually changed the position this.updateBounds(); } // Disable collision this.body.setCollisionMask(me.collision.types.NO_OBJECT); // Remove from game me.game.world.removeChild(this); } });
// Before melonJS 2.0 - Random Number between 0 and 5 var random = Number.prototype.random(0, 5); // After melonJS 2.0 - Random Number between 0 and 5 (Normal Syntax) var random = Number.prototype.random(0, 6); // After melonJS 2.0 - Random Number between 0 and 5 (Short Syntax) var random = (0).random(6);
![]() |
Tiled Level with Tiles Collision Layer |
![]() |
Tiled Level with Shape Collision Layer |
// melonJS 2.0 - me.Entity onCollision callback onCollision: function(response, other) { if (other.body.collisionType === me.collision.types.WORLD_SHAPE) { // Simulate a platform - property defined in Tiled Object if (other.type === "platform") { if (this.body.falling && !me.input.isKeyPressed('down') && (response.overlapV.y > 0) && (~~this.body.vel.y >= ~~response.overlapV.y)) { // Disable collision on the x axis response.overlapV.x = 0; // Respond to the Platform (it is solid) return true; } // Don't respond to the Platform (pass through) return false; } } // Make the object solid return true; }
// Functions removed from Engine me.Body.onslope me.Body.onladder me.Body.disableTopLadderCollision me.Body.canBreakTile me.Body.onTileBreak me.Body.collisionMap me.game.collisionMap
// Old Code -> New Code me.ObjectEntity -> me.Entity me.SpriteObject -> me.Sprite me.ObjectContainer -> me.Container me.video.getWidth -> me.video.renderer.getWidth me.video.getHeight -> me.video.renderer.getHeight me.video.getSystemCanvas -> me.video.renderer.getCanvas me.video.getSystemContext -> me.video.renderer.getContext me.video.getScreenCanvas -> me.video.renderer.getScreenCanvas me.video.getScreenContext -> me.video.renderer.getScreenContext me.video.applyRGBFilter -> me.video.renderer.applyRGBFilter me.video.getContext2d -> me.CanvasRenderer.getContext2d
// Before melonJS 1.1 me.video.init("game", 400, 300, true, "auto"); // After melonJS 1.1 me.video.init("game", me.video.CANVAS, 400, 300, true, "auto");
// Before melonJS 1.1 var sprite = me.SpriteObject.extend({ // Property active: yes, // Constructor init : function(x, y, sprite) { this.parent(x, y, sprite); }, // Draw draw: function(context) { // Draw only if is active if (this.active) this.parent(context); } });
// After melonJS 1.1 var sprite = me.Sprite.extend({ // Constructor init : function(x, y, sprite) { this._super(me.Sprite, "init", [x, y, sprite]); // Properties must be set in the init method only! this.active = yes; }, // Draw draw: function(renderer) { // Draw only if is active if (this.active) this._super(me.Sprite, "draw", [renderer]); } });
// Before melonJS 1.1 var myRenderable = new me.Renderable(new me.Vector2d(20, 50), 200, 300); var myRect = new me.Rect(new me.Vector2d(30, 60), 150, 50); // After melonJS 1.1 var myRenderable = new me.Renderable(20, 50, 200, 300); var myRect = new me.Rect(30, 60, 150, 50);The me.AnimationSheet now requires x, y and a settings hash to its constructor:
// Before melonJS 1.1 var animation = new me.AnimationSheet(10, 20, me.loader.getImage("sprite"), 64, 32); // After melonJS 1.1 var animation = new me.AnimationSheet(10, 20, { image: me.loader.getImage("sprite"), spritewidth: 64, spriteheight: 32 });
// Before melonJS 1.1 var entity = me.ObjectEntity.extend({ // Constructor init: function(x, y, settings) { this.parent(x, y, settings); // Set the gravity this.gravity = 2; // Set the velocity this.setVelocity(5, 8); }, // Update logic update: function(dt) { // Apply gravity this.vel.y += this.gravity; // Update entity Position this.updateMovement(); this.parent(dt); return true; } }); // After melonJS 1.1 var entity = me.Entity.extend({ // Constructor init: function(x, y, settings) { this._super(me.Entity, "init", [x, y, settings]); // Set the gravity this.body.gravity = 2; // Set the velocity this.body.setVelocity(5, 8); }, // Update logic update: function(dt) { // Apply gravity this.body.vel.y += this.body.gravity; // Update entity Position this.body.update(); this._super(me.Entity, "update", [dt]) return true;; } });
// Physics Old Code -> Physics New Code this.accel -> this.body.accel this.canBreakTile -> this.body.canBreakTile this.disableTopLadderCollision -> this.body.disableTopLadderCollision this.falling -> this.body.falling this.gravity -> this.body.gravity this.jumping -> this.body.jumping this.maxVel -> this.body.maxVel this.onladder -> this.body.onladder this.onslope -> this.body.onslope this.shapes -> this.body.shapes this.vel -> this.body.vel this.addShape -> this.body.addShape this.getShape -> this.body.getShape this.setShape -> this.body.setShape this.setFriction -> this.body.setFriction this.setMaxVelocity -> this.body.setMaxVelocity this.setVelocity -> this.body.setVelocity this.collisionMap -> this.body.collisionMap // Collision Old Code -> Collision New Code this.updateMovement() -> this.body.update() me.game.world.collide(this) -> me.collision.check(this, true, this.collideHandler.bind(this), true)
// Before melonJS 1.1 var entity = me.ObjectEntity.extend({ init: function(x, y, settings) { // Call the constructor this.parent(x, y , settings); // Default velocity this.setVelocity(3, 15); }, // Update logic update: function(dt) { // Change velocity this.vel.x -= this.accel.x * me.timer.tick; // Check for collision with environment this.updateMovement(); // Check for collision with enemies or objects var res = me.game.world.collide(this); if (res) { // Change velocity this.vel.y -= this.maxVel.y * me.timer.tick; // Change position this.pos.x -= 20; } this.parent(dt); return true; }, // Collision callback onCollision: function() { // Disable collision this.collidable = false; // Remove from game me.game.world.removeChild(this); } }); // After melonJS 1.1 var entity = me.Entity.extend({ init: function(x, y, settings) { // Call the constructor this._super(me.Entity, 'init', [x, y , settings]); // Default velocity this.body.setVelocity(3, 15); // Set the collision callback function this.body.onCollision = this.onCollision.bind(this); }, // Update logic update: function(dt) { // Change velocity this.body.vel.x -= this.body.accel.x * me.timer.tick; // Check for collision with environment this.body.update(); // Check for collision with enemies or objects me.collision.check(this, true, this.collideHandler.bind(this), true); this._super(me.Entity, "update", [dt]); return true; }, // Collision handler collideHandler: function(response) { // Change velocity this.body.vel.y -= this.body.maxVel.y * me.timer.tick; // Change position this.pos.x -= 20; // Update the entity bounds since we manually changed the position this.updateBounds(); }, // Collision callback onCollision: function(res, obj) { // Disable collision this.body.setCollisionMask(me.collision.types.NO_OBJECT); // Remove from game me.game.world.removeChild(this); } });
// Before melonJS 1.1 draw: function(context) { // Set the context color context.fillStyle = "#FFFFFF"; // Draw a simple rectangle context.fillRect(this.pos.x, this.pos.y, this.width, this.height); } // After melonJS 1.1 - Getting directly the context draw: function(renderer) { // Get the renderer context var context = renderer.getContext(); // Set the context color context.fillStyle = "#FFFFFF"; // Draw a simple rectangle context.fillRect(this.pos.x, this.pos.y, this.width, this.height); } // After melonJS 1.1 - Using me.CanvasRenderer methods (recommended) draw: function(renderer) { // Draw a simple rectangle, using the integrated function renderer.fillRect(this.pos.x, this.pos.y, this.width, this.height, "#FFFFFF"); }