Search the Community

I'm following the melonJS guides on space invaders and platformer. Tried to add a HUD component with score on it. Obtained the font files from their github: https://github.com/melonjs/tutorial-platformer/tree/28425a946836e21e58e8fbc443f380b990e7f527/tutorial_step6/data/fnt The text does show up, but it appears white, and I can't change the color on it. This is what I've tried: // 1 this.font = new me.BitmapText(0, 0, { font: "PressStart2P", fillStyle: "#000000", textAlign: "right", textBaseline: "bottom", }); // 2 this.font.tint.setColor(255, 128, 128); // 3 this.font.fillStyle = "#000000" (and "#000", and "black") // 4 this.font.fillStyle = me.Color(0, 0, 0); What am I doing wrong?

As you guys know, The COVID-19 / Viral Game is my flagship 1st full-fledged melonjs game. Not too long ago, I got vaccinated with my first Moderna jab. Hooray! My second one is coming up soon. So the jab has given me motivation. Why not add in a new gameplay feature to The Viral Game? Unfortunately I can't give you the vaccine if you haven't been vaccinated, but you can feel satisfied by simulating the effects of the vaccine on-screen! To support the international push towards vaccination, we have added a Vaccination gameplay feature in The Viral Game! You simply need to click the button, wait for the vaccination to build, then deploy it. It will then start spawning mRNA in the game, which does no damage. When attacked and killed by your white blood cells, it promotes your white blood cells, giving them a star at the top right-hand corner and higher damage against the real viruses in the game. You can watch our video here: Download The Viral Game here for Android: https://play.google.com/store/apps/details?id=com.customautosys.viralgame Visit https://customautosys.com/products/covidgame for The COVID-19 Game for desktop and web (web version works on iOS). Go on, support vaccination and play The Viral Game now!

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;

Hi, I have a beginner's question about melonjs. If I run '<any sprite object>.scale(2);', then the sprite will move a little to the upper left on the screen, and the sprite's appearance will be about four times as large. The anchorPoint of the sprite is (0.5,0.5)(=default), so I think the sprite can't move, it just doubles the size of the sprite, but what's wrong with my code? My environment is melonjs 8.0.1, browser is chrome, OS is macOS High sierra. Thank you.

Melon Editor comes from our vision "everyone can make games". so even those with limited programming knowledge can create their own dream games. just prepare your game assets and do a simple drag and drop and voila you're done! Making Games has never been this easy! execute now : http://editor.melongaming.com/user/login/

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]); } });

No luck with any of these changes. My code is attached I cannot seem to ever be able to change this offset in the slightest. After looking over all of the examples it's unclear as to what else needs to be modified for the mouse click event to grab the actual layer coordinates of the objects. TowerEntities.js

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>

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.

Here's the error : me.device.onReady(function onReady() { game.onload(); });

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.

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.

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 = me.game.viewport.height - 140; console.log("Creating Left Wall"); this.leftWall = new game.Wall( 160, wallY, game.collisionTypes.LEFT_WALL ); this.leftWall.createWall(); me.game.world.addChild(this.leftWall, 2); console.log("Creating Middle Wall"); this.middleWall = new game.Wall( me.game.viewport.width / 2 - 16, wallY, game.collisionTypes.MIDDLE_WALL ); this.middleWall.createWall(); me.game.world.addChild(this.middleWall, 2); console.log("Creating Right Wall"); this.rightWall = new game.Wall( me.game.viewport.width - 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) { me.game.world.removeChild(this); game.playScreen.enemyManager.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.LEFT_WALL) { me.game.world.removeChild(this); game.playScreen.leftWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.MIDDLE_WALL) { me.game.world.removeChild(this); game.playScreen.middleWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.RIGHT_WALL) { me.game.world.removeChild(this); game.playScreen.rightWall.removeChild(other); return false; } }

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

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

Hello everyone, this is my first Melonjs game. You can Play it here: https://bit.ly/2EXKyAM 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!

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?

I can't instantiate an image layer from .png file. Is it right? me.game.world.addChild (new me.ImageLayer (0, 0, { image: 'background' }), 1); I can't get the documentation clearly from http://melonjs.github.io/melonJS/docs/me.ImageLayer.html, I want to create a scrollable background, i looked at tutorial from http://melonjs.github.io/tutorial-platformer/ 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.

What is the event name when sprite enter on screen or game world . and same for on exit of screen event ??

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'); this.textarea.id = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true"; me.video.getWrapper().appendChild(this.textarea); }, update: function() { videoPos = me.video.getPos(); this.textarea.style = '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?

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.

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: https://github.com/michael-peacock/cosmictrespassers/tree/develop/src/main/resources/static/js

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!

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: https://groups.google.com/forum/#!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.

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!