Search the Community

Showing results for tags 'beginner'.

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
    • Web Gaming Platform
    • 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 50 results

  1. I'm just learning how to code with HTML5 and Phaser, so bear with me. I've been looking at a lot of different tutorials, and I've noticed something that I'm hoping someone can explain to me. In tutorials or examples on the Phaser site, functions are written out the way I'm used to: function preload() { //stuff } But in some of the tutorials, functions are written like this: preload: function() { //stuff } I've found that, at least using Intel XDK and Cordova, only the latter functions on the phone emulation. My question is, what's the difference? Is it Cordova that only accepts this format? Is there anything I have to keep in mind when I'm writing functions this way? It's just worrisome to me that I don't know why it's like this. I've tried searching for the information, but to no avail--I can't find the right keywords to get me any information. Thanks!
  2. Hello world, I'm newbie in BabylonJs. I have some problems when I try some actions on my mesh. 1. I wrote some function to control my mesh. I hope that when I click on mesh, it will perform an animation or redict to another page. I have written in a function but I don't know how to do that. 2. I want to display some text on the canvas. What can I try to do that ? Ex : I click on mesh, it will rotate around an axis and some text will display near there. Could someone help me so solve my problems ? thanks alot.
  3. Hello, I am working on a turn based game and I am trying to set up a Event/Signal chain for handling the turn sequence. Right now I have a endTurnEvent and a newTurnEvent. For the endTurnEvent I have some listeners that do clean up the ended turn and for the newTurnEvent I have some listeners that do the preparation for the new turn. Now in one of my endTurnEventListeners I also want to dispatch my newTurnEvent. But the way in which the events are handled seems to be that the eventListeners for the newly dispatched event get handled before those eventListeners left over from the older event are handled. So what I wished for is this: 1. endTurnEvent gets dispatched 2. one endTurnEventListener dispatches newTurnEvent 3. all other endTurnEventListeners are handled 4. all newTurnEventListeners are handled But what I get is this: 1. endTurnEvent gets dispatched 2. one endTurnEventListener dispatches newTurnEvent 3. all newTurnEventListeners are handled 4. all other endTurnEventListeners are handled Is there a way to get the behavior I wish? If not I guess I have to rethink the way in which I use events, any tipps for a solid event structure for turn based games would be very appreciated as well. Thank you
  4. Hello, I am new to phaser and I want to make a hex grid. I use sprites for my hex tiles. Now I want to bind some mouse events to those sprites. The problem is that the sprite is rectangular in shape and the event is also triggered on the transparent areas of my sprite. So there is some overlapping and inaccuracy for my events. Basically I want to have a non-rectangular hitbox for my sprite events. Can I somehow use the transparency of my sprite or at least draw some kind of shape to achieve this? I am not using any physics engine yet and I am not sure if I need to. hexagonGroup =; for (var tileY = 0; tileY < gridSizeY; tileY ++) { for (var tileX = 0; tileX < gridSizeX; tileX ++) { var worldCoordinates = getWorldCoordinates(tileX, tileY); var hexagon = game.add.sprite(worldCoordinates.x, worldCoordinates.y, 'hex'); hexagon.inputEnabled = true;, this); hexagonGroup.add(hexagon); } }
  5. Hi everyone! First things first, a disclaimer: I'm French, I read a lot in english but I rarely have the opportunity to write or speak in English, so forgive me for that . I'm a beginner in the world of gamedev and Phaser in particular. I've already tried EaselJS (CreateJS) a couple years ago for a little game prototype I made using hand-made tilemap (based on a simple two dimentional array). I wanted to try something more robust this time, I searched across the Web for a good gamedev framework and stumble upon Phaser. It seemed to me the best tool to go, so here I am! It's my first time using Tiled for creating my tilemaps. I've use the excellent roguelike tileset from KenneyNL (kudos to him! ). I've set up a simple sample map (to try a few Tiled features), followed several tilemaps examples provided on phaser's website. You can check the layers I'm using : Note that the collision layer contains only a tile (a red/brown dot) that I'm currently using as a visual marker (there's no collision implemented yet). My tileset is 16x16. The map is 200x200 tiles. I'm exporting it as JSON, layers data as CSV. I'm also using states (which is really a cool feature that I was missing with EaselJS). I've set up a jsfiddle hosting a stripped version of my source code with a few comments to explain the logic. There's also a fiddle with the JSON file of the tilemap if it can help. I'm using a deadzone for my camera, and added a visual representation of this deadzone. Everything is correctly loading, the map and all the layers are displayed accordingly, with the visual deadzone and my character (I'm on Ubuntu 14.04 x64 with a GTX 660 and using the latest Google Chrome version). Everything looks fine, I can move my character within the camera's deadzone while the camera is not moving (which is what I was looking for). I haven't set up a FPS debug but I feel that the framerate is stable and should be around 60fps. It all feel smooth, not shattered at all. So far so good. But the issue is coming when the deadzone is reached and that the camera begin moving to follow the player (e.g. when I'm moving far right), as follows : At this point, I feel a huge framerate drop! Any movement feels shattered, jerky. But as soon as the character gets back in the deadzone and the camera is moving no more, everything goes back normal. I've tried with another map of 100x100 and 50x500 tiles, with just one layer and a tileset of 4 sprites, and the results were the same... I think I'm missing something, or I must have done something wrong. I cannot believe that the problem would come from Phaser not correctly supporting tilemaps! My goal is to build a very simple stripped-down version of a Harvest Moon-like prototype, just for fun, for my pleasure. So I really need to work with tilemaps. I'm sad that a cannot acheive this with Phaser . Sam Vieten (SamTheMighty on these forums) gave me some advice on Twitter, about using a plugin (englercj/phaser-tiled) to optimize tilemaps implementation of Phaser. Is it really necessary to use this plugin? It's a bit of a shame if Phaser cannot handle tilemaps alone ... Anyway, thanks for you help!
  6. I would really like to make my first game but, sadly I haven't a clue as to how to start with coding. I know a little bit about HTML5 Website coding but idk if that will apply to game coding at all. Also, seeing that it's my first game I'd also like to try not to spend any money on this project yet. About my Game: I figured that I should give some details as to what my idea for my first game is so that you guys can kinda base all advice off of that. • It's going to be a music game with a piano. • In the beginning you'll be given a chart that shows you how to read music and what notes correspond to what key on the keyboard. • There will be 10-20 levels, each level holding a different song. All songs will be moderatly easy since the player will most likely have no experience reading music. • Bars with piano music will scroll by above the piano (at a preset speed depending on the song) and as the notes go over a green (see through) bar you would have to click that key on the piano. • Perhaps there will be a badge system. •When you hit a right note a light blue music note will float up a little ways above the key you clicked and gadually disapear. Art isn't really a problem since I know how to whip up some decent pixel art. I just need to know where to start coding (once again for free if possible). Anyways, I guess my overall question is, Where should I start with coding if I know nothing about game coding and the the stuff above is what I want my game to be like. Thanks in advance PS: Here are some of the pics that may be in the game.
  7. Phaser Project Setup Using Typescript via Terminal and GruntJS I'm trying to start my first Phaser project ever but I want to do it with typescript since it's one of the main reasons why I'm doing this project to begin with in order to learn Typescript. I'm working of an old Mac Pro 3,1 running Snow Leopard and there is no way for me to upgrade, just in case that issue comes up. I'm also coding via terminal using GruntJS as my preprocessor, MAMP as my webserver and for everything else I use sublime. Anywho because I don't have VS and most tutorials regarding Typescript and Phaser use VS as the main IDE, I figured I may have lost a couple of steps along the way or something. All I know is that my Typescript is giving me errors no matter what I try. The precompiler which is grunt-ts seems to be working jst fine but right away I get an error in my code on line 1 column 1, so I'm guessing it's something I'm doing wrong codewise. here is my app.js: /// <reference path="../typescript/phaser.d.ts"/> class SimpleGame { constructor() { = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create }); } game: Phaser.Game; preload() {'logo', 'phaser2.png'); } create() { var logo =,, 'logo'); logo.anchor.setTo(0.5, 0.5); } } window.onload = () => { var game = new SimpleGame(); }; and Here is the error I get on grunt-ts while compiling to javascript: Running "ts:dev" (ts) task Compiling... ### Fast Compile >>ts/app.ts ### Fast Compile >>ts/phaser.d.ts Using tsc v1.6.2 /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(1,1): error TS6053: File '/Users/ish/Games/Phaser_html5/demo_01/ts/pixi.d.ts' not found. /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(2,1): error TS6053: File '/Users/ish/Games/Phaser_html5/demo_01/ts/p2.d.ts' not found. /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(7,15): error TS2300: Duplicate identifier 'Phaser'. /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(56,16): error TS2300: Duplicate identifier 'Phaser'. /Users/ish/Games/Phaser_html5/demo_01/typescript/phaser.d.ts(7,15): error TS2300: Duplicate identifier 'Phaser'. /Users/ish/Games/Phaser_html5/demo_01/typescript/phaser.d.ts(56,16): error TS2300: Duplicate identifier 'Phaser'. >> 6 non-emit-preventing type warnings >> Error: tsc return code: 2 Warning: Task "ts:dev" failed. Use --force to continue. Aborted due to warnings. Which, for me, begs the question: How do I reference all of the Phaser framework files when not using an IDE like VS? How would I manually incorporate the Phaser engine into my project and reference the files? Say if I download the Phaser framework manually via my browser. How would I setup those files in that folder on my project? I can't seem to find a direct reference or tutorial to that anywhere. The ones involving typescript use Visual Studio as the ide and the ones that do not use VS only use plain vanilla javascript code. I'm looking for tuts that use Typescript but not any particular ide preferably just terminal or command prompt. Any help appreciated. Thanks.
  8. Greetings people smarter than myself. This is my first phaser self-guided exercise. I'm also very new to object oriented programming - and that may be the issue at hand. I have a single gamestate, "playgame", which has a placeTiles() function that I don't want to execute until a user clicks a "Begin" button. However, my code is not working as intended because the placeTiles() function is executing immediately upon loading. I think there is a fundamental concept that I'm missing. As you can see, I'm using preload, create, then some of my own - placetiles, showtile. Is it SOP for all of the functions inside playGame.prototype to run on initialization? If I don't want something running at that time, how do I prevent it or where should I move that block of code? Wouldn't it need to go within playGame somewhere? playGame.prototype = { myMoney: null, theEmpire: [], preload: function(){ game.stage.setBackgroundColor(0xEBEBFF); game.load.spritesheet("gadgets", "gadgets.png", tileSize, tileSize); }, create: function(){ // I've removed some code here where I create my background and color scheme // Create the Begin Button which should place the other tiles. var beginButton = game.add.button( 20,50,"gadgets",this.placeTiles(),this); beginButton.frame = 10; // There's a bunch more code here I've removed for this forum post */ }, placeTiles: function(){ for(var i=0; i < numCols; i++){ var serialButton = game.add.button( 250 * (i+1) , game.height/5 + (i*tileSpacing) , "gadgets" , this.showTile , this); serialButton.frame = i+1; serialButton.value = this.theEmpire[i]; }//i++ }, showTile: function(target){ //More functions, etc... },}; game.state.add("PlayGame", playGame); game.state.start("PlayGame"); };Any explanation or guidance would be most appreciated. Thank you for your time!
  9. Hello guys I am a flash game developer and want to make some html 5 games for web and mobile for fun While searching for html 5 game engines I found panda.js I think this is a perfect game engine for me but I don't seem to find any tutorial aimed towards complete beginner which tells how to set up the project and how to start things. I know javascript but I don't know how to use it with this engine. Please anyone if you know about any beginner tutorial please tell me ! Please! I really like this engine ( I love pandas ) Cheers, crayonHero
  10. Hi everyone, I just wrote a tutorial on how to remake the classic Pong game in HTML5 and Phaser. It's composed of 7-parts and I try to go as in-depth as possible to explain every single line of code I use. Tutorial Outline Project Setup Loading Assets & Adding Sprites Moving the Ball Adding the Game Mode Moving the Paddles & Adding Collisions Scoring and Resetting Adding Sounds and Wrapping Up Link to tutorial Source files I'm also planning to write similar game tutorials on other classic games like: Breakout Space invaders Asteroids If you enjoy the tutorial and would like more I would love to hear your thoughts. Feel free to reply, send me a message, leave a comment on my blog =)
  11. Hello everyone, I am not new to programming, but I am new to HTML5 game development. I was wondering if Phaser is a good place to start with making HTML5 games. I have seen that some people just use no framework starting out, but I didn't know if that was a good idea. Some people have also suggested using programs such as GameMaker or Construct2. I am just looking for some thoughts on this and appreciate any opinions given. Thank you all, Zio
  12. Hi, I want to make my first Phaser game, a graphical Roguelike on a hexagonal grid. I know, a square grid would be easier, but let me try it anyway. How can I reuse as much code possible from the Phaser libraries (e.g. Tilemap) as possible? I would like, for example, to use the functionality of these examples: Depth Sort example Tilemap Ray Cast CSV Map (scrolling) If I can use existing libraries, I would have less work, less bugs, and better performance. Performance isn't critical though and I might have less work if I implement everything myselft, rather than shoehorning the libraries to do something they weren't intended to. Collision detection isn't an issue (the player and the enemies are always standing in the middle of a cell).I would like to express North, North-East, South-East, South, South-West, and North-West as tuples of +1, -1 and 0.Here is a doodle I made which explains how I could use isometric or rectangular grid "technology" (I hope it was worth the time to create it!). (I wrote the x-coordinate first. I'm not sure if that's normal.) Did anyone of you make a game with hex grid? How did you do it? What would you recommend to me? Is this the right forum? Do you have questions?
  13. I'm a complete beginner to html5 game development. I've dabbled in java enough to know it well enough but that's pretty much it. How should I begin to tackle making games in html5? Should I try to learn javascript first and a bit of css and html on the side? I bought a book on html5 game development on amazon but it seems like it's a bit too advanced for me as the explanation in it are not enough and kind of expects me to already know javascript. How did you get started at this?
  14. Hi, I'm new to programming and trying to learn webGL using the playground on babylon js. The site is really good and seem to help me with learning about babylon js and webGL. I'm trying to modify camera target: camera.setTarget(BABYLON.Vector3.Zero()); to some other coordinate, for e.g. camera.setTarget(BABYLON.Vector3.(0, 0.2, 0)); This doesn't seem to work. Any ideas? I tried to search for some documentation that gives some examples on the various syntaxies but couldn't find any for a beginner level. Thanks.
  15. Hi all, This is my first game in JavaScript - actually my first program in JavaScript at all. No frameworks in this one, just JS. It is still in development, needs sounds and music. Perhaps new graphics too! Criticism is welcome - but be gentle Here is the game:
  16. So, I am trying to expand upon the "Making your first game" tutorial ( by creating states instead of running the game directly on the script tag in the html file. I have tried doing so by following the template provided, but I cannot answer must of the questions I have only by looking at it. I am also currently facing a bug that I would love some help in solving. The bug that I mentioned is freezing the game every time the player touches a star. The error I get is this one: Uncaught TypeError: Cannot read property 'kill' of undefined Lvl1.js:155 Lvl1.js is the file where I have the state. Line 155 points to the collectStar function: collectStar: function(player, star){ // Removes the star from the screen; // <--This is line 155 // Add and update the score this.score += 10; this.scoreText.text = 'Score: ' + this.score;}collectStar is called when there is an overlap between the player and any member of the stars group (I believe) this.physics.arcade.overlap(this.player, this.stars, this.collectStar, null, this);Here I create and add the items to the stars group: var star = this.stars.create(i * 70, 0, 'star');That is all I have for the bug, now for the questions: I realized that I have to use "this" a lot, but I am still unsure as of why and when I have to use it. Do I use it when I reference items declared inside the state? Or with items inside the function? Why don't I have to include the parameters? (player, star) when calling collectStar? This was also the case in the tutorial, and there were no bugs there. How do I load items (sprites and whatnot) in one state, so that I can use it in another state? For example, loading items in the preload state to use in the game state. Thank you! *Edit You can find the current version of it here
  17. (Warning, new Phaser user ahead) I´m making my first tests with States on Phaser, and I am now having a problem creating functions inside states that are not the predefined ones (create, update, etc). All in all, this is the code that is giving me trouble: this.physics.arcade.overlap(player, stars, collectStar, null, this);I define my collectStar function like this, before it is ever called: collectStar: function(){// Removes the star from the screen star.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score;},This is inside a state on a different Javascript file called Lvl1.js. The error I am receiving when running on Chrome is this: Uncaught ReferenceError: collectStar is not defined Lvl1.js:127Line 127 is where collectStar is called.
  18. Hey guys, After seeing all the awesome games posted on this forum, I was kind of reluctant to share mine but...what the hell I wanted to learn canvas so I decided to make a simple space shooter game. It's written in ~600 lines of JS. No frameworks, just JS (coffee actually). It's also my first game of any kind EVER. Here's the game: Here's the code: Criticism is welcome!
  19. Hi all, I recently started learning phaser framework by following online tutorials. I am struggling to understand the process to construct the codes. As an example, here's a line from one tutorial: this.timer =, this.add_row_of_pipes, this); I understand what this line does, but I don't get how game should be joined with time with events and end it with loop? None of the tutorials explain how one would traverse through all an object's members to find the right methods. I can consult the API but I still wouldn't know what to search for when writing my own codes. Could you share some tips? Thanks! tl;dr I know what I want to do, but don't know how to find things I can use.
  20. Hi Everybody, I am an experienced web developer, mostly done backend stuff in python and some server admin. I have some experience in frontend/ javascript as well and I wanted to dive into HTML5 game development. I really love this game - I want to built this game in HTML5. Can anyone guide me regarding -. Which framework should I go with Any basics development book. I think this game is not very complex, isnt it?Thanks
  21. When using Flixel I would have a gamestate, a player, enemy, perhaps coins etc as separate classes. Maybe a registry that stored assets etc. I had been tooling around with ImpactJS and that framework uses a similar structure. How do I implement a structure like this with a Phaser game? I only want the the index.html to set the css etc and load the game.
  22. Hi, I've come here from As3 and Flixel but am a complete newb in terms of html5 development. Can anyone point me in the direction of a begnners tutorial for phaser? and perhaps API documentation? I've gone through the basic steps on the site and have got the logo spinning. but now Im after next steps. Specifically I'm after info on best practices, project structure etc My next goal is to get a sprite mvoing around, then animate it. Any help, guidance would be very much appreciated.
  23. Hello everyone.I did making simple catching game.Grab the goal in thirty seconds.I am turkish so sory for my bad english.Thanks to everyone. Game link:
  24. Hey all, I'm fairly new to object-oriented javascript and had a quick question about the "right" way to set up an object. Namely, what's the benefit of using prototype versus just creating the function inside the object? Below are some examples: Using prototype function Rectangle(left, top, right, bottom){ this.left = left; = top; this.right = right; this.bottom = bottom; this.width = right - left; this.height = bottom - top;} Rectangle.prototype.getArea = function () { return this.width * this.height; } Not using prototype function Rectangle(left, top, right, bottom){ this.left = left; = top; this.right = right; this.bottom = bottom; this.width = right - left; this.height = bottom - top; this.getArea = function() { return this.width * this.height; }}As far as usage goes, I don't really see a difference, but I was curious if there was something I'm missing. Any info or advice is appreciated. Thanks!
  25. Hello everyone, I am very interesting in making HTML5 games and dynamic web applications. As someone with a Flash background, I want to remake my flash games, and also some of the full-flash websites (most of them are portfolio for artists and designers), Using HTML5 technology, i also made some Java game prototypes and only one desktop applications (i got payed for it ) , so am not a programming noob, but also am not a professional, and for HTML and JavaScript i still remember some of what they teaches us at high school and college, so, any suggestions, advise or links to get started ? thank you very much