Search the Community

Showing results for tags 'melonjs'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 24 results

  1. Golden Gui

    Error occuring during collision event

    Hello, I'm following the Space Invaders tutorial, during the collision management part of the tutorial i'm facing an issue when the onCollision event is reached. The removeChild from the inherited object isn't recognized. I didn't found the solution yet. Hoping you can help me. Thanks in advance.
  2. sistemlogikadigital

    Error when try to run using phonegap android

    Here's the error : me.device.onReady(function onReady() { game.onload(); });
  3. Hello everyone, i'm facing an issue pretty weird discovering the melonJS framework following the space invaders tutorial. When i try to implement the player movement actions, i get a problem on the clamp function of the Sprite Object. I'm more from the TypeScript world so not really used to the old way making objects on js, but i verified the melonjs.js file, and the function seems to be implemented well into the object. I use the last release of the boilerplate by the way. Thanks in advance.
  4. frost-byte

    Boiler Plate Grunt for Self Hosting

    I've created my own variation of the Space Invaders game, but I started with the boiler plate repo on github. I've updated from melonjs 6.0 to 6.3. I'm having an issue with the output of the "grunt" command. Unfortunately the bundling of melon and my game source files will not run. When execution reaches game.onload(), the console throws an error saying that game is undefined. Everything works if I just copy my javascript files over and adjust the index.html to load them, instead of the js/app.min.js My question is, what is the proper way to bundle all the project now, so that I don't have this issue? (Incidentally I was also seeing an error about drawShape, a function I'm not even using, and that went away if I just used the unbundled and unminified melon.js) <script type="text/javascript"> me.device.onReady(function onReady() { game.onload(); }); </script>
  5. frost-byte

    Keyboard Input not Working in Chrome

    I'm using melon 6.3.0 and I'm self hosting my game. If I run the game via Firefox, it works just fine. (I've also tested MS Edge and the latest version of Opera, they also work) However, when using chrome, the keyboard input acts as though it is 'stuck'. If I push one of the keys I have bound for movement to the left (A or the left arrow), the game behaves as though the key is still pressed even after it has been released. This makes it impossible to move to the right, as the game no longer seems to respond to pressing D or the Right arrow key. However, I can still press the spacebar and the player shoots.
  6. I've taken the SpaceInvaders example project and extended it - added different enemy types with animations, a different player, also with animations. I'm in the process of adding the three 'walls' or 'barriers' that were in the original game. I've set up each wall as a separate instance of a class that extends me.Container. Each container holds 4 rows of 12 images in a grid, similar to how the enemies are stored in a container with a grid. Currently all the walls are rendering properly, but it seems like the quad for each wall is offset to the midpoint of the wall (along the x axis). So when I fire, into visually what appears to be empty space, I'm actually hitting and removing a piece of the wall. See the attached gif to get an idea of what the issue is, I have debugging enabled so that you can see the boundaries for each piece of the wall and the walls themselves. The left edge of the collision quad for the wall container seems to be placed horizontally in the middle of the wall, instead of at the left edge. Am I missing something - a parameter for defining the left of the quad? Here's a snippet from play.js, the ScreenObject. onResetEvent: function() { ... var wallY = - 140; console.log("Creating Left Wall"); this.leftWall = new game.Wall( 160, wallY, game.collisionTypes.LEFT_WALL ); this.leftWall.createWall();, 2); console.log("Creating Middle Wall"); this.middleWall = new game.Wall( / 2 - 16, wallY, game.collisionTypes.MIDDLE_WALL ); this.middleWall.createWall();, 2); console.log("Creating Right Wall"); this.rightWall = new game.Wall( - 192, wallY, game.collisionTypes.RIGHT_WALL ); ... } Here's the code for the Wall 'class': game.Wall = me.Container.extend({ init: function (left, top, collisionType) { // A Wall is composed of three sections, each representing // a different character. this.PREFIXES = ["wall_L_","wall_M_","wall_R_"]; // Each Character, or wall section, is cut up into a grid of // four rows and columns. this.COLS = 4; this.ROWS = 4; this.PIECE_WIDTH = 16; this.PIECE_HEIGHT = 16; // The width of an entire row (and the container itself), the width of each piece (cell) // or column in a wall section * the number of columns per wall section // * the number of wall sections this.wallWidth = this.PIECE_WIDTH * this.COLS * this.PREFIXES.length; this.wallHeight = this.PIECE_HEIGHT * this.ROWS; this._super(me.Container, "init", [left, top, this.wallWidth, this.wallHeight]); this.vel = 0; this.collisionType = collisionType; }, createWall: function () { // generate the entire wall, left to right, section by section, column by column for (var j = 0; j < this.ROWS; j++) { for (var c = 0; c < this.PREFIXES.length; c++ ) { for (var i = 0; i < this.COLS; i++) { // The name of the image var wallPiece = this.PREFIXES[c] + j + i; // The x and y coords for the wall piece var x = c * this.COLS * this.PIECE_WIDTH + i * this.PIECE_WIDTH; var y = j * this.PIECE_HEIGHT; // Add the piece as a child of the wall container. this.addChild(me.pool.pull("wall_piece", x, y, wallPiece, this.collisionType)); console.log("wall.createWall: (" + x + ", " + y + "); img: " + wallPiece); } } } this.updateChildBounds(); this.createdWall = true; }, onActivateEvent: function () { }, onDeactivateEvent: function () { }, removeChildNow: function (child) { this._super(me.Container, "removeChildNow", [child]); this.updateChildBounds(); }, update: function (dt) { this._super(me.Container, "update", [dt]); this.updateChildBounds(); } }); and, the onCollision method from laser.js (i've defined custom collision types) onCollision: function (res, other) { if (other.body.collisionType === me.collision.types.ENEMY_OBJECT) {; game.playScreen.enemyManager.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.LEFT_WALL) {; game.playScreen.leftWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.MIDDLE_WALL) {; game.playScreen.middleWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.RIGHT_WALL) {; game.playScreen.rightWall.removeChild(other); return false; } }
  7. gtspina

    Fix position after scale

    Hi guys. I'm trying to do a "zoom in" effect on a GUI_Object. But when scaling the image leaves the original collision field. How to keep the image centered with the collision field of the button? Before click: After click: Code: game.UI.ButtonInit = me.GUI_Object.extend({ init: function (x, y, image) { this._super(me.GUI_Object, "init", [x, y, { image: image, }]); this.anchorPoint.set(0, 0); this.floating = false; }, onClick: function () { this._super(me.Sprite, "scale", [.8, .8]); }, update: function () { return true; }, draw: function (renderer) { this._super(me.GUI_Object, "draw", [renderer]); } });
  8. currently im using method setRegion to change frame on GUI_Object, but i want change it like Entity using setCurrentAnimation. this.renderable = game.texture.createAnimationFromName(imgNames); this.renderable.addAnimation ("on", [0]); this.renderable.addAnimation ("off", [1]); this.renderable.setCurrentAnimation("on"); When i run this code on GUI_Object i got an error. So how to achieve this on GUI_Object ?? thanks
  9. sistemlogikadigital

    [Noob Question] Rotate toward mouse cursor

    How to rotate an object toward mouse cursor? so far i tried this code, but the object not rotate correctly update:function{ var mousePos = me.input.globalToLocal(me.input.pointer.clientX,me.input.pointer.clientY); var angle = this.angleToPoint(new me.Vector2d(mousePos.x, mousePos.y)); this.renderable.currentTransform.rotate(angle - this.PrevAngle); this.PrevAngle = angle; } Thanks
  10. sistemlogikadigital

    Change image quality

    I tried to change image quality in image-rendering css, but whenever i change the value it seems always pixelated. Because my image is not pixel art, i want the value of image-rendering to optimizeQuality or auto. So can melonjs achieve that? here is my css : image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: opti mize-contrast; -ms-interpolation-mode: bicubic;
  11. sistemlogikadigital

    [Melonjs] Wall to Wall (Simple avoider game)

    Hello everyone, this is my first Melonjs game. You can Play it here: This is game is simple avoider game, you just need to click anywhere to move and avoid anything red. Note : can only be played on browser desktop screenshot: Thanks for playing! Enjoy!
  12. sistemlogikadigital

    How to change animation when game paused

    I tried to change animation from GUI_Object when game paused, but the result : 1. object's animation not changed. 2. object's animation changed after the game resumed. so, How to change animation when game paused?
  13. Wahyu Hidayat

    Can't Add Image Layer from PNG

    I can't instantiate an image layer from .png file. Is it right? (new me.ImageLayer (0, 0, { image: 'background' }), 1); I can't get the documentation clearly from, I want to create a scrollable background, i looked at tutorial from but i just get the load process from TMX, i just want from normal png, can anyone help me, thank you. I've add the resource image 'background' to game.resources and load it successfully, because other image file there can be displayed by entity/sprite in my game.
  14. melongaming

    Indie Game Maker Contest 2018

    Welcome to the 2018 Indie Game Maker Contest! We took a year off but we're back to bring you the First Indie Game Maker Contest! This year we're putting the focus on our flagship game making software, Melon JS. Your quest if you choose to accept ("but thou must") is to make a GAME using any legal Melon Js in just Three MONTH! Compete for over $10,000 in Cash Prizes! PRIZES The most important goal of the Melon Gaming Contest is to make that game you've been dreaming of, and what better motivating factor than a large cash prize! This year we're limiting the prizes to the following: 1st Prize 2nd Prize 3rd Prize Favourite Games The first three prizes will be determined by a team of Judges. More details to follow HERE. RULES Before you open up the map editor and place that first event, make sure to read through the Contest Rules HERE! The Rules page includes all the information you'll need to make sure you meet the contest requirements. Breaking the rules can lead to penalties, or even disqualification, so make sure to view them before getting started. It also includes Prize Conditions and Legal COMMUNITY Are you looking for a place to share progress on your project, recruit talent for your team, offer up your skills, or simply just get motivated? Then make sure to join the official Melon Gaming Maker forums and get involved! We've even setup a subforum exclusively to discuss the 2018 IGMC! CLICK HERE TO JOIN THE FORUMS! The purpose of Melon Gaming GameDev Contest is to gather all of the game enthusiasts around the world to develop games by using the MelonJS engine and published to Facebook Messenger instant games platform. we encourage the game enthusiast to pour the ideas and creativity to be the worldwide champions!
  15. What is the event name when sprite enter on screen or game world . and same for on exit of screen event ??
  16. 01271

    Code that runs on resize

    Hey all, I want to resize an element but not as often as I currently do it. Right now I have a project with an html element that gets resized on every frame and it runs on every update. game.gui.TextArea = me.Renderable.extend({ init: function() { this.textarea = document.createElement('textarea'); = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true";; }, update: function() { videoPos =; = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; } }); I'm concerned about this, this code will run way more often than it needs. Not sure about the performance impact but it only needs to run when the window size is updated. Is there a way I can piggyback on any melonjs functions that resize the canvas and only run it then?
  17. 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.
  18. First off - I'm having a lot of fun playing with melonJS. Great work on the library. I've just gone through the Space Invaders tutorial, and have worked through some of the challenges (for example, adding a HUD, adding waves). I'm now looking at adding enemy lasers that would be spawned from the enemy entities, and collide with the player. The obvious idea is that enemies should be able to shoot the player, and if the player is hit, then I'll decrement the number of lives. I've got the basic Enemy_Laser entity coded, and it appears to work, except for the initial position. When the player moves, and you hit the space bar, the player's Laser will fire from the player's current player position. The enemy laser, however, spawns from the initial position of the enemy entity objects rather than their current position. I suspect this is due to the enemy entities being wrapped within the enemy_manager container. Do I need to update the position of the enemy entities within the enemy_manager? I see there's a setChildsProperty() method in the container object. Can/should this be used to update the position of the enemy_manager child entities? You can view the source code here:
  19. Hi, In my isometric tmx file the object positions are :"x":4097 , "y": 3300. But in melonjs when i load the positions I am getting entirely different x and y cordinates. How can i map these both! can someone help me here! I am trying to save the game by editing the tmx json. so the x and y postions I am getting from the UI, when i try to save them in json . its not aligned.the postions are completely different!
  20. The documentation for sprite animation is a bit out of date and a new method setAnimationSpeed(speed) or setAnimationSpeed(identifier, speed) should be added. I have a sprite and an animation this._super(me.Sprite, 'init', [339, 480, settings]); this.addAnimation('normal', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],100); this.setCurrentAnimation('normal'); This animates at a delay of 100 ms. I can change the animation delay by adding another parameter to the addAnimation method. I could not change the delay afterwards with the solutions I found. I have seen this answer:!topic/melonjs/mk6mVcMoVKo but it is no longer relevant. this.anim.normal.animationspeed isn't a part of melonjs anymore and changing the other animationspeed settings doesn't have any effect. This is I think, because of a change from a 'global' animation delay to a frame-based animation delay. The new method for changing the speed of an animation should now be: setAnimationSpeed: function(identifier, speed) { for (var i = this.anim[identifier].frames.length - 1; i >= 0; i--) { this.anim[identifier].frames[i].delay = speed; } } There should be a note on the sprite and/or renderable pages about the animation speed able to be individually set on a per-frame basis. It could be useful for example if some character is looking to the left and then turning quickly to the right the frame set wouldn't have to look like this: [0],[0],[0],[0],[0],[0],[0],[0],[0],[0],[0],[0],[0],[0],[1],[2],[3],[4],[5],[5],[5],[5],[5],[5],[5],[5] and could just have a long delay on the 0 and 5 frames. Every X.0.0 version should result in a new version of the wiki and documentation with the changes you're making. Relevant changes to each could be made to affected pages after.
  21. Cian Games

    Vibrant Recycling

    Hi Vibrant Recycling is an educational arcade game for HTML5 compatible browsers where the player will help fun bins to collect and recycle properly wastes thrown during various levels of the game. Earn bonus by preventing contact of the residue thrown with the water and avoid collect the waste in the bin incorrect, otherwise paralyze it temporarily! Properly recycle the most wastes to progress in the game and is rewarded with several fun facts about recycling and the environment! Thanks for playing and good fun! How to Play / Hints:Click on the screen to bin move the arm and collect the residue.To gain Bonus Stars, you must collect the wastes before they reach the water, collecting them in the air.After the first 5 levels, multiple bins are shown, increasing the challenge.Made with melonJS (Game Engine), Tiled (Level Editor) and Inkscape (Vector Graphics). Any feedback is welcome!
  22. Cian Games

    Upgrading to melonJS 2.1

    Hi guys With the release of melonJS 2.1 version (check the Official Announcement ), is time to conduct a upgrade to it: Upgrading to melonJS 2.1 The upgrade from melonJS 2.0 to melonJS 2.1 is easy, making it a good and right choice. Take a look at it Thanks!
  23. Cian Games

    Upgrading to melonJS 2.0

    Hi With the release of melonJS 2.0 version, is time to conduct a upgrade to it: Upgrading to melonJS 2.0 The melonJS 2.0.0 is a solid and stable version, demonstrating the maturity and evolution that the engine achieved during the last three years. Take a look at it Thanks!
  24. Then about this new release itself, plenty of exciting things to say : We added support for Texture Packer : to optimize memory usage and loading timeWe added JSON format support for TMX maps : so that no browsers can complain anymore about the TMX formatWe added built-in support for CocoonJS, through the JSON format of course, but as well through direct and automatic usage of specific extension : to ease deployment of melonJS based games on mobile devices.We redesigned Object Entity hierarchy/inheritance to use a renderable component approach (that will now hold the “drawable” part of the entity) : to simplify object definition and also allow for more flexibility with 3rd-party “drawable” components (who says spine?).We Largely improved the Font and Bitmap Font objects (multi-line support, cleaned the API, etc..)And so many other things, that you should rather have a look at the Changelog