Search the Community

Greetings all, I am have been a 'C' and Assembler systems coder for over 35 years. I am retired now and I want to try my hand at writing a game. I have been reading the documentation a great deal as well as looking at many examples. I have also been in communication with Dad72 who is a member here. He has been very kind. That being said I have some questions regarding the mechanics of Babylon.js. I am a real noob when it comes to this framework as I have always programmed 'on the wire' and never used a scripted language that is not strictly type cast so please forgive my ignorance. My goal is to build a 3D game that has a detective who runs around and solves crimes. He will go into several areas looking for clues and then use those clues to solve the crime. As an example, the detective may be sent to a warehouse where he will open a safe after finding the combination and then see some clues that will lead him to a suspects home. There will be human models, as well as different things that can be picked up examined and used. The story may be outside sometimes as well as inside. This is a very basic description of the mechanics of the game but I think you can see where I am going. I need some advice on what documentation I should read. What forums I should frequent and perhaps even some examples. I am really at a loss as my area is low level operating system programming in Windows, Linux, and DOS. I do have some questions about what I think may help me, so if you would not mind I would like to ask them. I have been doing some reading and stumbled upon SceneLoader.Append. Is it possible to build an entire level in Blender, then export that with the Babylon.js Blender exporter, then load that with SceneLoader.Append? Is that the best way to build the game I described. After a level is loaded can I then set up collision detection with actions? Can I bring in different models with their textures and place them in the scene after it is loaded? As an example, opening a container will expose a model that was not there before. Can I also delete models from the scene after some action. I have no idea how to accomplish any of this. I cannot load a terrain and place a model on it and keep it from falling through the terrain. I can't even build walls for a room and set up collision detection within the room. The one thing I do have is lots of time as I am retired and a clear understanding of programming principles. Thank you so much for your time, it is greatly appreciated. Regards, Richard

Hi! I am a beginner to melonJs, but I love it so much, it works so well with tiled map editor. Here is the question: We can use object in tiled to mark entity for melonJs, But I would like do a little bit further:use image as object for better visual. like this: Of cause it works, thanks melonJs, that image even been replace by the entity. But if I don't load all the tileset image in the tmx file, for example the player image I use in tiled. "me.levelDirector.loadLevel" will fail. So, it's there a way to skip loading some tileset in tmx file?

Hello! I am making a waste sorting game and when the player loses all their lives, I wish to restart the game. I click the 'RETRY' text and the state reloads, but it seems that my life and garbage sprites never reload. I am wondering if it is because they are in an array (see this.garbage = []; and this.lifeSprites = [];). I have never used game.state.start to reload a state multiple times, I have only ever used it to call a state once. If I cannot get game.state.start to reload my game, I will create a restart() method with some re-positioning code and whatnot. BUT it would be way awesome if I could figure out why this doesn't work!! Below is my code and here is a link to my game so far (my code is still mucho messy). Arrow keys to rotate on desktop. BasicGame.Game = function (game) { this.firstDrop = true; this.garbage = []; this.MAX_TRASH = 5; this.lowestTrash = null; this.lastLowestTrash = null; this.lowestTrashType = null; this.lives = 3; this.lifeSprites = []; this.gap = 500; this.MIN_GAP = 250; this.fallSpeed = 3; this.MAX_FALL_SPEED = 5.5; this.sorter = null; this.rotationSpeed = 10; this.targetRotation = null; this.isRotating = false; this.clockwise = true; this.orientation = null; this.Orientation = { NORTH: 0, EAST: -90, SOUTH: -180, WEST: 90 }; this.TrashType = { BLUE: 0, COMPOST: 1, GREY: 2, YELLOW: 3 }; this.leftKey = null; this.rightKey = null; this.gameover = false; this.score = 0; this.scoreText = null; this.highScoreText = null; this.msgText = null; this.continuePrompt = null; }; BasicGame.Game.prototype = { create: function () { this.lowestTrash = 0; this.lastLowestTrash = this.MAX_TRASH - 1; var trash; for (i = 0; i < this.MAX_TRASH; i++) { trash = this.game.add.sprite(this.game.world.centerX, -this.gap * (i + 1), 'trash'); trash.loadTexture('trash', this.rnd.integerInRange(0, this.MAX_TRASH)); trash.anchor.setTo(0.5); this.garbage.push(trash); if (i == 0) { this.lowestTrashType = trash.frame; } } var life; for (i = 0; i < this.lives; i++) { life = this.game.add.sprite(0, 0, 'life'); life.anchor.setTo(0.5); life.x = (this.game.width - (life.width / 2 + 10)) - (i * life.width); life.y = life.height - 10; this.lifeSprites.push(life); } this.sorter = this.game.add.sprite(this.game.world.centerX, this.game.height, 'sorter'); this.sorter.anchor.setTo(0.5); this.orientation = this.Orientation.NORTH; this.targetRotation = this.orientation; this.scoreText = this.add.bitmapText(25, 25, 'arialPixelated', '0', 16); this.scoreText.align = 'left'; this.highScoreText = this.add.bitmapText(25, 50, 'arialPixelated', 'BEST: ' + BasicGame.highScore, 16); this.highScoreText.align = 'left'; this.continuePrompt = new SuperBitmapText(this.game, this.game.world.centerX, this.game.world.centerY + 100, 'arialPixelated', 'RETRY', 16, 25); this.continuePrompt.anchor.setTo(0.5); this.continuePrompt.align = 'left'; this.continuePrompt.alpha = 0; this.continuePrompt.inputEnabled = false; this.msgText = this.add.bitmapText(this.game.world.centerX, this.game.world.centerY, 'arialPixelated', '', 16); this.msgText.anchor.setTo(0.5); this.msgText.align = 'center'; this.game.input.onDown.add(this.rotateSorter, this); this.game.input.onDown.add(function() {if (this.continuePrompt.isDown){this.game.state.start('Game', true, false);}}, this); this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT); this.rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this.game.input.keyboard.addCallbacks(this, this.rotateSorter); //For mobile. Phaser.Canvas.setTouchAction(this.game.canvas, 'auto'); this.game.input.touch.preventDefault = true; }, update : function () { if (!this.gameover) { this.garbage.forEach(function(trash) { trash.y += this.fallSpeed; trash.angle += 0.25; }, this); if (this.garbage[this.lowestTrash].y > this.game.height - (this.sorter.height / 2.5)) { this.checkIfScored(); } } this.sorter.angle = Phaser.Math.snapTo(this.sorter.angle, this.rotationSpeed); if (this.sorter.angle != this.targetRotation) { this.isRotating = true; } else { this.isRotating = false; } if (this.isRotating) { if (this.clockwise) { this.sorter.angle += this.rotationSpeed; } else { this.sorter.angle -= this.rotationSpeed; } } }, resetTrash : function () { this.garbage[this.lowestTrash].y += -this.gap * (this.MAX_TRASH); this.garbage[this.lowestTrash].loadTexture('trash', this.rnd.integerInRange(0, this.MAX_TRASH)); this.lowestTrash++; if (this.lowestTrash > this.garbage.length - 1) { this.lowestTrash = 0; } this.lowestTrashType = this.garbage[this.lowestTrash].frame; }, checkIfScored : function () { if (this.lowestTrashType == this.TrashType.BLUE && this.orientation == this.Orientation.NORTH) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else if (this.lowestTrashType == this.TrashType.COMPOST && this.orientation == this.Orientation.EAST) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else if (this.lowestTrashType == this.TrashType.GREY && this.orientation == this.Orientation.SOUTH) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else if (this.lowestTrashType == this.TrashType.YELLOW && this.orientation == this.Orientation.WEST) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else { this.fallSpeed = 3; this.updateLives(); } this.resetTrash(); this.scoreText.setText(this.score); }, updateLives : function () { this.lifeSprites[this.lives - 1].loadTexture('lifeFull'); this.lives--; if (this.lives == 0) { this.gameover = true; this.msgText.setText('GAME OVER!\n' + this.score + ' responsibly disposed trashes!'); this.continuePrompt.alpha = 1; this.continuePrompt.inputEnabled = true; this.continuePrompt.input.useHandCursor = true; if (this.score > BasicGame.highScore) { BasicGame.highScore = this.score; this.highScoreText.setText('BEST: ' + BasicGame.highScore); } this.garbage.forEach(function(trash) { trash.kill(); }, this); this.game.input.onDown.remove(this.rotateSorter, this); } }, rotateSorter : function () { if (this.game.device.desktop && !this.gameover) { if (this.leftKey.isDown) { this.rotateLeft(); } else if (this.rightKey.isDown) { this.rotateRight(); } } else { if (this.input.y >= this.sorter.y - this.sorter.height) { if (this.input.x >= this.game.world.centerX) { this.rotateRight(); } else if (this.input.x < this.game.world.centerX) { this.rotateLeft(); } } } }, rotateLeft : function () { this.clockwise = true; switch (this.orientation) { case this.Orientation.NORTH: this.orientation = this.Orientation.WEST; break; case this.Orientation.EAST: this.orientation = this.Orientation.NORTH; break; case this.Orientation.SOUTH: this.orientation = this.Orientation.EAST; break; case this.Orientation.WEST: this.orientation = this.Orientation.SOUTH; break; } this.targetRotation = this.orientation; }, rotateRight : function () { this.clockwise = false; switch (this.orientation) { case this.Orientation.NORTH: this.orientation = this.Orientation.EAST; break; case this.Orientation.EAST: this.orientation = this.Orientation.SOUTH; break; case this.Orientation.SOUTH: this.orientation = this.Orientation.WEST; break; case this.Orientation.WEST: this.orientation = this.Orientation.NORTH; break; } this.targetRotation = this.orientation; } }; EDIT: My input listeners also get jacked up. I separate mobile and desktop but when the state restarts, my mobile listeners are firing when they shouldn't be because I am using desktop, not mobile.

Hi. I have a problem with multiple levels (game states). What can I do when, I don't want to write the same piece of code in each level over and over? I've tried to create a function in separate js file which e.g. will set player sprite, gravity, animations or will create necessary variables etc. And I failed this. Everything what I have got are errors.

Is there tutorial, what is best way to make level/state change as non-portable way? I mean when level1 is completed, level2 comes direct to after level1, so it changes level without any loading or other fancy things.

Need some help and hoping someone will know an answer. I'm trying to create a tilemap world where if the player continues to walk right, eventually they end up back at the beginning of the stage. Does anyone have any idea how this is accomplished?

Hi all, I'm interested in building a 2d shooter or runner game (think Gradius) where the levels are designed ahead of time. That is to say, the platforms and enemies would NOT be procedurally generated, but rather part of a scripted level. My plan was to give the player a positive x velocity, moving him/her to the right in a long world (currently 6000 pixels wide) and have the camera follow him/her, and literally have enemies and objects waiting at predefined positions. Basically I want to know, is this a reasonable way to build this type of game? I'm wondering how big can the world be (roughly) and how many objects can I pre-place off-screen before I start to run into performance trouble. If this is a concern, what strategies can I use to mitigate it? Off the top of my head I'm thinking I could pool objects or not render/run enemy routines until they are on-screen. Thanks for any thoughts you can provide. Nick

Hello all, I am pretty new to Phaser, and am trying to build a simple platformer game. There is no live version yet (the code needs a lot of refactoring, and is in *many* files), but I made a quick screencast if you are curious: The user can go back and forth between each level using doors. For now every time the user enter a level, all the objects (only monsters for now) are recreated. I was planning to add coins (or diamonds etc.) in each level, and was wondering what would be the best approach if I would like to make the state of each level persistent: if the player has already collected all the coins, the level would now be empty. What I had in mind - on entering a level, parse the tilemap objects and retrieve all objects matching the type "coin" - put all these in an array - copy this array in a global object ('levelState'), with a reference to the level they come from - when a player grabs a coin, delete the reference to this coin from the global object - when the player re-enters the level, check if a reference to this level exists in 'levelState' - if it exists, render the coins from the 'levelState' object rather from the tilemap data Would this be the correct approach? Any potential issues? Is there another way to do it? Thank you!

Ironbane is a cooperative action MMO played straight from your browser, using 3D graphics and a retro graphics style. The game focuses on simple gameplay without leveling and combat using swords, axes, daggers, bows and magic staves. Our intention is to create a vast alive and immersive world. The main objective of the game is to defeat Ironbane, an evil dragon with rising power and a plan to conquer the world, who is living in his cursed castle. Originally started in March 2012, Ironbane has been in development for over 3 years and is aiming to become an awesome WebGL MMO that you would actually play. We're currently at 0.4 pre-alpha, aiming to release alpha in May. Try it out and see for yourself. Link to Game Design Document Screenshots Gameplay Videos Team Nick (Nikke) - developer, founder Ben (Warspawn) - developer Sam (Ayillon) - level editor Kevin (DatapawWolf) - gameplay designer, marketing Jan (Meanapple) - pixel artist Eric (Eric) - moderator Wattie (Thaiberius) - moderator Technology Ironbane runs 100% using Javascript. Behind the scenes we're using Meteor, AngularJS and ThreeJS in just one codebase. We're looking for Level Designers and 3D Modelers We're pretty serious about Ironbane, and we're looking for motivated people who'd like to help turn this game into a success. If you have experience building levels/3D models and are looking for a cool project, drop me a line at [email protected] or post here. It's important that you have an idea of what makes a level interesting. We wrote a small guide on level design, check it out. We work primarily using Clara.io, an online 3D modeling package which we use to build our levels in. Example scene Let me know what you think. Any questions you have, I'll gladly answer.

I have a game that I am working on and I want it to have different levels. When the player collides with the door sprite I want it to load up the next level. Could you put the code on how to do that? Thanks P.S. Sorry im a newb...

hello everyone, I'm rather new in phaser and I'm having a hard time trying to figure this out... I'm working on a game with three levels (each as a different state), and what I want to do is that when the user wins the third level, the first level starts again (with some changes in speed and stuff like that to rise difficulty). i want it to happen until the user dies. A little graphic to explain it better: || level 1 || level 2 || level 3 (win) || level 1 (harder) || level 2 ( harder) || level 3 (harder) -> (dies) || menu what is the best approach to accomplish that? I hope anyone can help me sort this out.

I am struggling to disable my level buttons. I have 7 levels and apart from the first one I need to disable mouse events on buttons 2..7. I made a "for" cycle to generate my buttons, as I will have up to 21 levels, which is going to make my code better looking. Here is my "for" cycle boxes = [];numOfBoxes = 7;for (i = 0; i < numOfBoxes; i += 1) { box = gameObject.add.button(offsetXPos + startXPos * i, 40, wml.ImageAssetKeys['BOX' + (i + 1) + '_SHEET'], clickEvent, this, 2, 1, 1); box.frame = 0; // disabled state frame box.inputEnabled = false; box.input.enabled = false; boxes.push(box); this.screenObjects.add(boxes[i]);}So what this code manages to do is to set the frame to 0 but mouse events still enabled, i.e I can hover over the buttons and click them. I have the feeling that those input.enabled commands are not running thoroughly since if I run the code again the buttons get disabled. What is the problem? Is this a bug? And why there are two ways to disable input, inputEnabled and input.enabled?

Hi all, so i'm new in phaser, i've started learning it by making a project, so i have a problem : I have more than one level for example 10 levels each one has it's own state, so the problem i don't want to make every time the same update function and other functions for every state. So is there any way to make one function for all the 10 state ? And thank's

Curently, I am making a roguelike game and have a little problem with drawing(updating) the level on the screen. The map is two-dimentional array which generates at the begining of the script ( ). If the player hits an arrow button then movePlayer() function is called. Inside that function we draw the map (1 frame per player's move). That's where the trouble begins. It is starting to drop frames very badly when all the tiles are drawn together (less tiles - more drawing speed, but not enough to play the game). Here is some code: var mapSize = { // in tiles (one is 16x16 px) width: 44, height: 62};//...generating random arrayvar stage, renderer;start();var wallTexture = PIXI.Texture.fromImage("images/level/wall.png");var container = new PIXI.DisplayObjectContainer();function start(){ renderer = PIXI.autoDetectRenderer(992, 704, document.getElementById('canvas')); stage = new PIXI.Stage(); this.document.onkeydown = movePlayer; } function movePlayer(){ //... <-- basic movement here requestAnimFrame(drawMap); renderer.render(stage);} function drawMap(){ for (var i = 0; i < mapSize.width; i++){ for (var j = 0; j < mapSize.height; j++){ if(map[i][j] == '20'){ //'20' is a wall tile var wall = new PIXI.Sprite(wallTexture); wall.position.x = i * tile; wall.position.y = j * tile; container.addChild(wall); } //... drawing other tiles here } } stage.addChild(container); }Thank you, for your help and time.

TouchTheBeat is a game for tablets and other touch-enabled devices currently in development. Alpha 1 was just finished and can be playtested here: Play Alpha 1 TouchTheBeat is level-based. Each level consists of a song from SoundCloud and a composition of gameobjects. The more rhythmically accurate you interact with the gameobjects, the higher your score will be in the end. The game comes with the ability to create and share your own levels. You can find more information on TouchTheBeat in my blog post here: http://coloreddrums.de/touchthebeat-alpha-1/ Due to the fact that this is Alpha 1, the graphics are obviously kept very simple at the moment. This is my first game and I would love to get some feedback from you! Especially I would like to know how you experience the difficulty of the included demo-levels.

Hi all! Our latest games is coming this week, Homerun Champion! Homerun Champion is a simple timing based games, about batting stand off between two baseball team to see which one can score the most homerun! For this games, rather than monster, rocket, or robot, we actually looking for alternative inspiration in real life (in this case, sport/baseball). We want to know what is the most interesting/fun aspect of baseball, and we found that it's either the batting or running part. To keep this games small in scope, we decide to focus on the batting battle and build a game around it Link: http://j.mp/homerunchampion Hope you enjoy it! Do let me know if you have problem or feedback!

Hi folks! Our latest games these week is a simple puzzle games, Moon Rocket! Moon Rocket is an exciting puzzle games where player must rush to connect the oil pipe to the Rocket before it's launch. You must arrange and rotate the oil pipe as such that it can transport the oil to all five parts of the Rocket. Can you ensure the success of this moon mission? Link: http://j.mp/moonrocket It's quite fun to find the appropriate logic to connect the oil & pipe. Hope you have fun playing it! Let me know if you have problem or feedback regarding this games!

Hi there! Like usual, we want to share about our newest games here, Gattai!!! Gattai!!! is our take on Threes concept. It's a puzzle games where player must combine the same type of Mecha to level it up, and launch it by double click/tap based on the target on the top screen. Just a trivia, Gattai come from Japanese language that means 'union/combine', and often used on anime where several vehicles/robots must combine to form an even greater/powerful robot Link: http://j.mp/gattaii Hope you enjoy it! Do let me know if you have any feedback/problem with the games

Hi there! This week we want to show you our latest games, Master of Arms: Sword, Staff, Spear Master of Arms: Sword, Staff, Spear (let's just call it MoA ) is a frantic, quick-reaction, rock-paper-scissors type of games where you must quickly defeat enemy by choosing the correct weapons. Wrong moves, and it will spell defeat for you. It contain 6 enemy types to beat, 18 levels to clear, and highscore for each level. Can you master your arms? Kudos to my partner Novpixel (for design) and Anto (for music) as always! Link: http://j.mp/swordspearstaff Hope you have fun playing it! Have problem or feedback? Don't hesitate to tell me!

Hi there! This week we want to share with you an educational HTML5 games, Sagemath! Sagemath is a math-arcade games where user must use correct wand (math operator) to combine Hero and Monster number, to defeat the enemies. We try to take a different route when coming up with the idea of new games, and try to make a quick & simple defense games using math mechanism. Play it on mobile browser for fun parallax effect Link: http://j.mp/sagemath Alternate Link: https://dl.dropboxusercontent.com/u/47459072/sagemath/index.html Hope you enjoy this little brain teaser! Do let me know if you have any problem or feedback

Hello my name is ali.I am turkish so sorry for my bad english.I have a an questions.I developed html5 games beginner level.How to create a level or map how to make these?

Hi, some fellow students and I developed the game iKuh, which is freely playable online at http://ikuh.clay.io and we are currently looking for feedback. The goal is to lead the cow to the trophy by dragging arrows from the inventory (right) to the field (left). Every animal that steps on an arrow will change its direction according to the arrow. That's the gist of it. It is intended for desktop-PCs and tablets. We used the impactJS-framework. The game was developed as part of the clay.io "Got Game?"-competition. What we already plan to change: - we have a set of new items implemented, that are not currently used in the levels (teleporter and arrows, that rotate when an animal steps on them) - we want to change the theme of the game (rather, we want to introduce a theme that makes a little bit more sense than a cow running towards a trophy) - we got ourselves a graphic designer to redo the graphics We would be most interested in feedback concerning: - gameplay, i.e. Are there situations that confuse you or that you find unintuitive? Are you happy with the introduction/tutorial or was there some point at the beginning where you did not know what to do? - level design, i.e. Which level do you like and which level suck? Thanks and best regards, Martin