agmcleod

Members
  • Content count

    100
  • Joined

  • Last visited

About agmcleod

  • Rank
    Advanced Member

Contact Methods

  • Twitter
    agmcleod

Recent Profile Visitors

1,462 profile views
  1. agmcleod

    How to draw on particular [TMX] layer?

    I don't know the answer exactly, but to do something like basement underneath a main floor of a house for example would require much more complex map setup than just layers in an isometric tmx map.
  2. agmcleod

    Shooting projectiles in a specific direction

    Hey sorry for not getting back sooner. You just need to increase the velocity by the accel value: this.body.vel.x -= this.body.accel.x * me.timer.tick; this.body.vel.y -= this.body.accel.y * me.timer.tick; Do that after calling setVelocity, and before the body.update(). If you have a look a the source of setVelocity, you'll see it's setting the acceleration rate: https://github.com/melonjs/melonJS/blob/master/src/physics/body.js#L412
  3. agmcleod

    place one object to another object

    For your first question, I would create a subclass of me.Renderable that uses me.Font to draw the text you need. Note that me.Renderable implements no drawing logic, you'll need to call the renderer to draw the text. Here's a simple example: const MyRenderable = me.Renderable.extend({ init (x, y, w, h) { this._super(me.Renderable, 'init', [x, y, w, h]) this.font = new me.Font('Arial', '20px', '#f00') } draw (renderer) { renderer.translate(this.pos.x, this.pos.y) this.font.draw(renderer, 'Hi there!' 10, 10) this.font.draw(renderer, 'Hows it going?', 10, 20) renderer.translate(-this.pos.y, -this.pos.y) } }) You can put any text in the font.draw() function, so you could pull the width, height, etc. from the object, and set it on this one. How you do that is really up to you in terms of code structure. For your second question, yes I believe that should work. If your draggable object has a physics body, youll want to make sure you exclude those two objects from colliding into each other. Much like how the player in the platformer tutorial controls that logic. https://github.com/melonjs/tutorial-platformer/blob/gh-pages/tutorial_step9/js/entities/entities.js#L92
  4. agmcleod

    place one object to another object

    Anchor point is a Vector2d, where x & y are a number between 0 to 1. It defaults to 0.5, 0.5, so half way between the width and height. You can update this like any other Vector2d object: this.anchorPoint.set(0, 0.5)
  5. agmcleod

    place one object to another object

    Hey there. I would suggest giving the tutorials a try if you haven't already in the getting started: http://melonjs.org/index.html#getting-started The platformer has some examples on rendering text. Our examples can also be super useful for learning how to do different things. The shapes example has logic for clicking/hovering over target objects. https://github.com/melonjs/melonJS/tree/master/examples To find the center point of an object, it really depends on your shape. By default, melonjs sets the anchorPoint property to the middle of the object. So if you have a 50x50 square, and set its position to 25, 25. The top left of the square would be sitting at the corner of the screen. So really you should be able to use `this.pos` to get the center point.
  6. agmcleod

    Shooting projectiles in a specific direction

    Hey there. In order to have something translate from one point to another, you need to do some calculation to determine the angle. First thing is to grab the angle in radians between both points. const angle = Math.atan2(targetPos.y - pos.y, targetPos.x - 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) Note I haven't tested this with MelonJS. This some older code i pulled out from a game in 2013 i did with melon, and quickly tested the math in a code pen: You may not need to subtract the 90 degrees from the angle, depending on how the matrix applies the rotation.
  7. Graphics are hard! When I first saw this, I suspected some rogue transform rotate3d was on the loose or something. Just didn't suspect the rotation code would be off. I would think it would be the same across browsers... Matrix math isn't controversial.
  8. So I tried setting the rotationQuaternion directly, and that seems to do it: https://playground.babylonjs.com/indexstable#TZUQWM#2 I did try using the beta, but you might also see my thread where I'm not seeing shadows in any browser, and particle effects not rendering over the shadow only material in Safari & Chrome.
  9. It seems to be okay in 3.1.0, but that's been giving me other problems, so im wondering if i can find a fix in 3.0.7. https://playground.babylonjs.com/indexstable#TZUQWM#1 Is there some other way I need to set the rotation? If it renders correctly, it looks like: In the playground in FF 37/dev edition on windows I'm seeing:
  10. Yeah I'm not sure what's going on. Would it be helpful to share my code? It wouldn't be a runnable example, as it's using other pieces of state.
  11. Not quite there, but interestingly enough, the particles do get cut off: http://playground.babylonjs.com/#A8DRKJ#2 When i change the clear color on my local example to use (0, 0, 0, 0.1), a slightly opaque background, i can see the particles again. Shadows still no go.
  12. Ah good call, didn't realize that was a requirement with directional light. Done. I'll see if I can get a playground together to reproduce.
  13. @MackeyK24 @Deltakosh I may have been misunderstanding the core issue. I don't think FPS actually drops, but the scene itself takes longer. It's a physics based scene using cannon.js. The results seem to be the same, but it just runs longer for some reason.
  14. I have my own local copy of the shadow material, as I can't seem to pull it from the built version of babylon. I pull in BabylonJS via NPM and put it together using webpack. I import the local copy of the shadow only material, and it hoists itself onto BABYLON. I did a diff against the one here: https://github.com/BabylonJS/Babylon.js/blob/master/dist/materialsLibrary/babylon.shadowOnlyMaterial.js. There are no changes since originally pulling it. The reason I ask is because since updating from 3.0.7 to the 3.1.0-beta3, in order to fix another bug in firefox 56 on windows, I've noticed that the particles and shadows are not rendering over top of the shadow only material for me anymore in Chrome & Safari. Weirdly the particles work in firefox 38, but the shadows still do not render. I have babylon in my package.json. The webpack config is pretty standard on using the babel-loader, no special considerations for babylonjs.' The code I use to create the ground, using the shadow only material: const ground = BABYLON.Mesh.CreateGround('ground1', 10, 16, 2, scene) ground.position.x = 0 ground.position.y = 0 ground.position.z = 9 ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.6 }, scene) ground.receiveShadows = true let groundMat if (this.showTableMaterials) { groundMat = new BABYLON.StandardMaterial('groundMat', scene) groundMat.diffuseColor = new BABYLON.Color3(0.3294117647, 0.631372549, 0.3647058824) } else { groundMat = new BABYLON.ShadowOnlyMaterial('shadowOnly', scene) } ground.material = groundMat The shadow & light setup: // This creates a light, aiming down toward the table from the left this.light = new BABYLON.DirectionalLight('light1', new BABYLON.Vector3(0, -10, 1), scene) this.light.specular = BABYLON.Color3.White() // Adjust light source to make more distinctive shadows this.light.direction = new BABYLON.Vector3(0, -3, 2) this.shadowGenerator = new BABYLON.ShadowGenerator(1024, this.light) this.shadowGenerator.useBlurExponentialShadowMap = true this.shadowGenerator.useKernelBlur = true this.shadowGenerator.blurKernel = MAX_SHADOW_KERNEL_BLUR this.shadowGenerator.setDarkness(0.4) Then the mesh & material for the dice: const die = BABYLON.Mesh.CreateBox(`dice${dieNumber}`, DICE_SIZE, scene) this.setDiePosition(die, dieNumber) die.material = this.diceMultiMat die.subMeshes.push(new BABYLON.SubMesh(0, 0, 4, 0, 6, die)) die.subMeshes.push(new BABYLON.SubMesh(5, 0, 4, 6, 6, die)) die.subMeshes.push(new BABYLON.SubMesh(2, 0, 4, 12, 6, die)) die.subMeshes.push(new BABYLON.SubMesh(3, 0, 4, 18, 6, die)) die.subMeshes.push(new BABYLON.SubMesh(4, 0, 4, 24, 6, die)) die.subMeshes.push(new BABYLON.SubMesh(1, 0, 4, 30, 6, die)) this.shadowGenerator.getShadowMap().renderList.push(die) So if i set the ground to use teh shadow only material in this test sandbox i have, set the css body background to blue. This is how it looks: Youll see no shadows under the dice, and the fire only appears over the cubes. The same setup in firefox:
  15. I've noticed my scene running slower too, even on 3.1.0 beta.