Ian_

Members
  • Content count

    9
  • Joined

  • Last visited

  1. 5.0.0 & 5.0.1 release

    Sounds great, I'll upgrade this weekend when I get a second. Would you have any tips on using multiple sprites to construct a player, for instance weapons, armor and animating them? Sorry for slightly derailing the thread.
  2. Do you build your UI's in MelonJS or DOM?

    Thank you
  3. 5.0.0 & 5.0.1 release

    Looks good! I do have a quick question in regards to the following My problem is in this thread and the answer mentions this, would that have been the problem as to why it was constantly spinning on the spot and such? Great release, thank you for your hard work
  4. Do you build your UI's in MelonJS or DOM?

    Interesting, my UI will be fine then in the DOM as it's static other than some css animations.With pre creating the DOM, my idea would be once the game loads, it would create a template then when they open the quest dialog and click a quest it fills in the quest info into the template, does that make sense? For example you may have 2 divs side by side, one that lists current quests, the right side would contain information from whichever quest is clicked Open Questbook Click Quest on the left panel Performs a request to the server to get the quest Pushes this information into the pre generated DOM content (Quest Window), it would purely be text replacement, though it may generate new divs for styling. Would this be ok?
  5. Do you build your UI's in MelonJS or DOM?

    Good to know, thanks
  6. Do you build your UI's in MelonJS or DOM?

    Thank you very much, would you say the same about in game content such as a Quest Log, Health Bars on enemies, Inventory etc?
  7. Hey everyone, I see various games using the DOM for certain elements, I was wondering about peoples experience on this, I have a pretty complex HUD designed and feel it would be much easier to maintain and manage in the DOM and use events from the game to update the HUD. Would you suggest using the DOM or MelonJS? Advantages/downsides would be appreciated.
  8. Sort of works, the angle is indeed now correct, however it doesn't move to it's destination, I think I messed something up, I have updated the code below. game.Spell = me.Entity.extend({}); game.Spell.Icebeam = game.Spell.extend({ /** * constructor */ init: function (x, y, settings) { settings = settings || { image: 'short-ray', height: 86, width: 16 }; // call the constructor this._super(me.Entity, 'init', [x, y, settings]); this.alwaysUpdate = true; this.body.collisionType = me.collision.types.PROJECTILE_OBJECT; var pos = me.input.pointer.pos; this.endX = pos.x; this.endY = pos.y; // then calculate the velocity console.log('Aiming at', pos); }, update: function (dt) { // If the current position isnt at the endpoint then move it there const angle = Math.atan2(this.endY - this.body.pos.y, this.endX - this.body.pos.x); // The ice beam that you're firing, use that angle to set its rotation: // For some reason we need to offset by 90degrees. I think it's due to the natural orientation of things in the canvas this.renderable.currentTransform.rotate(angle - 90 * Math.PI / 180); // then calculate the velocity this.body.setVelocity(Math.cos(angle) * 3, Math.sin(angle) * 3); // If current path of protectile is not at the endpoint move forward // The ice beam that you're firing, use that angle to set its rotation: // For some reason we need to offset by 90degrees. I think it's due to the natural orientation of things in the canvas // handle collisions against other shapes me.collision.check(this); this.body.update(dt); // return true if we moved or if the renderable was updated return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); }, onCollision: function (response, other) { if (other.body.collisionType === me.collision.types.PROJECTILE_OBJECT || other.body.collisionType === me.collision.types.PLAYER_OBJECT) { return false; } console.log('Collision on ice beam other', other.body.collisionType); console.log('Collision on ice beam response', response.body.collisionType); me.game.world.removeChild(this); return true; } }); I would also like to note that the IceBeam entitity spins round and round on the spot ONLY when the player moves.
  9. Hi there, I am looking into how projectiles can be fired, my intention is to try and fire in the direction that the cursor is at ( me.input.pointer.pos ). My first idea was to try and work out if the cursor needs to move in a positive or negative direction, I added `mainPlayer` to the pool, so somehow if I can get the position of them then I can work out which way to shoot in regards to right or left, but I'm not sure how to access the `mainPlayer`. How would you go about solving this problem? My Entities are below so you can see how they currently react /** * Player Entity */ game.PlayerEntity = me.Entity.extend({ /** * constructor */ init: function (x, y, settings) { settings = settings || { image: 'character_default_run', height: 32, width: 32 }; // call the constructor this._super(me.Entity, 'init', [x, y, settings]); // set the default horizontal & vertical speed (accel vector) this.body.setVelocity(1, 1); // set the display to follow our position on both axis me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH); // ensure the player is updated even when outside of the viewport this.alwaysUpdate = true; // define a basic walking animation (using all frames) this.renderable.addAnimation("walk", [0, 1, 2, 3, 4, 5, 6, 7]); // define a standing animation (using the first frame) this.renderable.addAnimation("stand", [0]); // set the standing animation as default this.renderable.setCurrentAnimation("stand"); this.body.collisionType = me.collision.types.PLAYER_OBJECT; }, /** * update the entity */ update: function (dt) { if (me.input.isKeyPressed("action1")) { var action = me.pool.pull("iceBeam", this.pos.x, this.pos.y); me.game.world.addChild(action); } if (me.input.isKeyPressed("run")) { this.body.setVelocity(2, 2); } else this.body.setVelocity(1, 1); if (me.input.isKeyPressed("left")) { // update the entity velocity this.renderable.flipX(true); this.body.vel.x -= this.body.accel.x * me.timer.tick; if (!this.renderable.isCurrentAnimation("walk")) { this.renderable.setCurrentAnimation("walk"); } } else if (me.input.isKeyPressed("right")) { // unflip the sprite this.renderable.flipX(false); // update the entity velocity this.body.vel.x += this.body.accel.x * me.timer.tick; // change to the walking animation if (!this.renderable.isCurrentAnimation("walk")) { this.renderable.setCurrentAnimation("walk"); } } else { this.body.vel.x = 0; } if (me.input.isKeyPressed("up")) { // update the entity velocity this.body.vel.y -= this.body.accel.y * me.timer.tick; if (!this.renderable.isCurrentAnimation("walk")) { this.renderable.setCurrentAnimation("walk"); } } else if (me.input.isKeyPressed("down")) { // update the entity velocity this.body.vel.y += this.body.accel.y * me.timer.tick; if (!this.renderable.isCurrentAnimation("walk")) { this.renderable.setCurrentAnimation("walk"); } } else { this.body.vel.y = 0; } if (this.body.vel.y === 0 && this.body.vel.x === 0) this.renderable.setCurrentAnimation("stand"); this.body.update(dt); // handle collisions against other shapes me.collision.check(this); // return true if we moved or if the renderable was updated return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); }, /** * colision handler * (called when colliding with other objects) */ onCollision: function (response, other) { if (other.body.collisionType === me.collision.types.PROJECTILE_OBJECT) { return false; } // Make all other objects solid return true; } }); game.Spell = me.Entity.extend({}); game.Spell.Icebeam = game.Spell.extend({ /** * constructor */ init: function (x, y, settings) { settings = settings || { image: 'short-ray', height: 86, width: 16 }; // call the constructor this._super(me.Entity, 'init', [x, y, settings]); this.alwaysUpdate = false; this.body.collisionType = me.collision.types.PROJECTILE_OBJECT; var pos = me.input.pointer.pos; this.endX = pos.x; this.endY = pos.y; console.log('Aiming at', pos); }, update: function (dt) { this.body.setVelocity(3,3); // If the current position isnt at the endpoint then move it there console.log(me.game.world.getChildByName("mainPlayer")); // if(this.pos.x <= this.endX && this) // { // // Set x velocity // this.body.vel.x += this.body.accel.x * me.timer.tick; // // } // else // me.game.world.destroy(this); // handle collisions against other shapes me.collision.check(this); this.body.update(dt); // return true if we moved or if the renderable was updated return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); }, onCollision: function (response, other) { if (other.body.collisionType === me.collision.types.PROJECTILE_OBJECT || other.body.collisionType === me.collision.types.PLAYER_OBJECT) { return false; } me.game.world.removeChild(this); return true; } }); Appreciate any pointers, thanks