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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 43 results

  1. Hi everyone, // If I make grammar mistakes, please excuse me. I'm still not fluent in English ahah I'm a beginner on Phaser, had to have a look into that for my courses. I'm now upgrading a basic tutorial and I want to use a timer (a countdown) in that game but it really doesn't work, it only create a black screen. To do this, I followed this tutorial : I tried other, without success. Some were a bit to hard to understand, others were pretty ugly ! So here is the code I used , can you help me ? : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); // on ajoute un diamant game.load.image('dmd','assets/diamond.png') game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } var player; var platforms; var cursors; var stars; var diamonds; var score = 0; var scoreText; var countdown; function create() { // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms =; // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-100, 510, 'ground'); ledge.body.immovable = true; // The player and its settings player = game.add.sprite(32, - 150, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.bounce.y = 0.2; player.body.gravity.y = 350; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); // Finally some stars to collect stars =; // We will enable physics for any star that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 10; i++) { // Create a star inside of the 'stars' group var star = stars.create(i * 70, 0, 'star'); // Let gravity do its thing star.body.gravity.y = 15; // This just gives each star a slightly random bounce value star.body.bounce.y = 0.2 + Math.random() * 0.2; } // On ajoute les diamants; diamonds.enableBody=true; // création des diamants dans l'espace de jeu for (var i = 0; i < 3; i++) { var dmd = diamonds.create(i * 70, 0, 'dmd'); dmd.body.gravity.y = 30; dmd.body.bounce.y = 0.1 + Math.random() * 0.2; } countdown.startTime = new Date(); countdown.totalTime = 120; countdown.timeElapsed = 0; countdown.createTimer(); countdown.gameTimer =, function(){ countdown.updateTimer(); }); // The score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { // Collide the player and the stars (et les diamants du coup) with the platforms game.physics.arcade.collide(stars, platforms); game.physics.arcade.collide(diamonds, platforms); game.physics.arcade.collide(player, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(player, stars, collectStar, null, this); // idem pour les diamants game.physics.arcade.overlap(player, diamonds, collectDiamonds, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150;'right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { // Removes the star from the screen star.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } function collectDiamonds (player, dmd) { dmd.kill(); score += 50; scoreText.text = 'Score: ' + score; } function createTimer(){ var countdown = this; countdown.timeLabel =, 100, "00:00", {font: "100px Arial", fill: "#fff"}); countdown.timeLabel.anchor.setTo(0.5, 0); countdown.timeLabel.align = 'center'; } function updateTimer (){ var countdown = this; var currentTime = new Date(); var timeDifference = countdown.startTime.getTime() - currentTime.getTime(); //Time elapsed in seconds countdown.timeElapsed = Math.abs(timeDifference / 1000); //Time remaining in seconds var timeRemaining = countdown.timeElapsed; //Convert seconds into minutes and seconds var minutes = Math.floor(countdown.timeElapsed / 60); var seconds = Math.floor(countdown.timeElapsed) - (60 * minutes); //Display minutes, add a 0 to the start if less than 10 var result = (minutes < 10) ? "0" + minutes : minutes; //Display seconds, add a 0 to the start if less than 10 result += (seconds < 10) ? ":0" + seconds : ":" + seconds; countdown.timeLabel.text = result; if(countdown.timeElapsed >= countdown.totalTime){ // On cherche la fin du timer result = "Rate !"; } }
  2. How This Will work?

    I think I will use time loop event and some rndX but i confused how to implement it to my code. I want the rock sticky on the platform so i use phaser arcade mode I want to make it but have no idea. Can anyone help me? Any help will be appreciate
  3. Help with scales?

    So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following: // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this: // Here we create the ground. var ground = platforms.create(0, - 64, 'ground'); Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks! Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background? tutorial.html part9.html
  4. I've follow the example in but my star didn't appear. Does in my codes have mystake? Can you help me find the problem? Thaanks This my Code... main.js
  5. Hello, i am again... i have a realy noob question but cant find an answer. Since i playing with this Playground i try to figure out how i can get the position of the car (mesh = carBody ?) Im not successful. Line 42 - 44 scene.registerBeforeRender(function(){ console.log("Poisition", carBody.position); }); The only thing that changes is when i turning the steering wheel. Nothing about the position on the ground... I tought the carBody "merge" all meshes into one and move them around with them. So that the positions property on child meshes a relative to the parent mesh. I dont get it...
  6. How to start?

    How do I start my first project, I have messed around with the playground and I'm ready to start the full version. Buuuuuut I dont know how to open the full version. I downloaded all the files from github but I just dont know how to open the actual module
  7. Need help with states and text

    Hay guys, trying to learn states and i've run into a problem. I've got this function. And when it is called, i need it to create some text. States and breaking my phaser game into several files is a first for me and i cant for the life of me figure this out. I need to create some text from the animationPass function, but i get this error: Uncaught TypeError: Cannot read property 'text' of undefined -- of line 7, and thats where the create introText line is. in my intro.js i've got function animationPass() { introText = this.add.text(320, 240, 'Write some text'); //i've tried this.introText - but that didnt work either. } var introMap = function (game) { var introText; } introMap.prototype = { create: function () { animationPass(); }, update: function () { } } And this has worked fine so far. Infact i've used this structure in another file and it works just fine there. Here i get however Uncaught TypeError: Cannot read property 'text' of undefined -- of line 7, and thats where the create introText line is. My preload.js looks like this preload = function (game) { WebFontConfig = { google: { families: ['Press Start 2P'] } }; } preload.prototype = { preload: function () { this.load.spritesheet('intro', 'img/introAnim.png', 172, 124, 25); }, create: function () {"introMap"); } } I humbly ask for your assistance. And i'm sorry if the answer is obvious. I would not ask if i hadn't spend a great deal of time trying to figure out the answer myself.
  8. Introducing RUNPIXI.js

    I created a little library which sets up all the minimal stuff I need to create a PIXI screen and "game loop". I am heavily relying to this in each of my projects. You just need to incorporate jQuery [edit: jQuery not needed anymore in v0.3], pixi and RUNPIXI (in that order), create a div or something with a given size and an id, and then call: <script> function myloop() {} // do your looping stuff here RUNPIXI.initialize("mypixidiv", myloop); // [edit] removed jQuerys # selector. </script> ..and that's it. I think this could be usefull for everyone who is new to pixi and also for other "lazy" people. What it does now is the following: It creates the pixi screen in the given element, using the size of that element. It creates three containers to draw on, from which the middle one can be scrolled with arrow and asdw keys. (You can turn scrolling off, of course) Also it registers a resize event, which resizes the pixi context when the element resizes. You can add and apply shaders with your desired names. v0.2 enables you to capture the screen to a texture or array. Oh, I almost forgot: Here's the link, have fun with it and gimme some credit if you like it. (in text/reputation form, I don't want your money.) "Documentation" is in the readme file.
  9. Uncaught SecurityError

    Hello, I have an issue with loading a image in phaser. I keep getting the same error, it says "Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/CindySchroer/Downloads/Plaatjes/Phaser/assets/images/background.png may not be loaded". I don't understand why it isn't loading (see attatched). Can anyone explain what is happening here? A little step-by-step would help because I'm a beginner. Thanks! Cindy
  10. I have few small boxes which I want to fit in big box. e.g I have 4x3, 4x4, 4x8 small boxes. And one big box of 4x(3 + 4 + 8 = 15) => 4x15. I want all these small boxes to be aligned in one line. Which are covered by big box. This big box is not visible at very close distance from camera only small boxes are. But it hides all the small and displays it self only at large distance from camera. How do I achieve this? Edit 1: I have drag and drop functionality thanks to @Wingnut, so doing drag and drop on big box should affect small boxes.
  11. Hello Forum I have started to creating a game with . I followed the tutorial from lessmilk. Now I have a basic question. In the tutorial he use this method: // Create our 'main' state that will contain the game var mainState = { preload: function() { // This function will be executed at the beginning // That's where we load the images and sounds }, create: function() { // This function is called after the preload function // Here we set up the game, display sprites, etc. }, update: function() { // This function is called 60 times per second // It contains the game's logic }, }; // Initialize Phaser, and create a 400px by 490px game var game = new Phaser.Game(400, 490); // Add the 'mainState' and call it 'main' game.state.add('main', mainState); // Start the state to actually start the game game.state.start('main'); But I also see in other projects or examples like in the examples something like this: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render }); function preload() { } function create() { } function render() { } Now I want to know what I should take or learn better. I think the first one is an older version of Is there some issues with the old one, what is better? Or can I make it like I want at the end? Thank you.
  12. Taking tutorial requests!

    Hello! You probably know me from the free Phaser tutorials that I have made on Youtube Here is the newest one that I have published. Now I want to take your requests, what do you want me to feature? Is there a certain topic that you would like me to cover and go over? Please reply to this post with your suggestions! Here is the video that tells you a bit more about me Thank you all! <3
  13. Hi all i'm totally new to phaser so far my work is like the following: var game; // the spinning wheel var wheel; // can the wheel spin? var canSpin; // number of slices (prizes) placed in the wheel var slices = 12; // prize names, starting from 12 o'clock going clockwise var slicePrizes = ["$20", "$50", "$10", "$500", "$5", "$50", "$20", "$50", "$10", "$500", "$5", "$50"]; // the prize you are about to win var prize; // text field where to show the prize var prizeText; window.onload = function() { // creation of the game game = new Phaser.Game(600, 600, Phaser.AUTO, ""); // adding "PlayGame" state game.state.add("PlayGame",playGame); // launching "PlayGame" state game.state.start("PlayGame"); } // PLAYGAME STATE var playGame = function(game) {}; playGame.prototype = { // function to be executed once the state preloads preload: function() { // preloading graphic assets game.load.image("wheel", "wheel.png"); game.load.image("dot", "oie_transparent (1).png"); game.load.image("arrow", "arrow.png"); }, // funtion to be executed when the state is created create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#880044"; wheel = game.add.sprite(game.width / 2, game.width / 2, "wheel"); wheel.anchor.set(0.5); arrow = game.add.sprite(game.width / 2.5, 70, 'arrow'); arrow.scale.setTo(0.4, 0.3); game.physics.arcade.enable(arrow); arrow.anchor.set(0.5); arrow.enableBody = true; dots =; dots.enableBody = true; dots.physicsBodyType = Phaser.Physics.ARCADE; for (var i = 0; i < slices; i++) { var x = Math.cos(i / slices * Math.PI * 2) * 225, y = Math.sin(i / slices * Math.PI * 2) * 225; var dot = wheel.addChild(dots.create(x, y, "dot")); dot.anchor.set(0.5); dot.body.immovable = true; } // adding the text field prizeText = game.add.text(, 578, ""); // setting text field registration point in its center prizeText.anchor.set(0.5); // aligning the text to center prizeText.align = "center"; // the game has just started = we can spin the wheel canSpin = true; // waiting for your input, then calling "spin" function game.input.onDown.add(this.spin, this); }, // function to spin the wheel spin() { // can we spin the wheel? if (canSpin) { // resetting text field prizeText.text = ""; // the wheel will spin round from 2 to 4 times. This is just coreography var rounds = game.rnd.between(3, 5); // then will rotate by a random number from 0 to 360 degrees. This is the actual spin var degrees = game.rnd.between(0, 360); // before the wheel ends spinning, we already know the prize according to "degrees" rotation and the number of slices prize = slices - 1 - Math.floor(degrees / (360 / slices)); // now the wheel cannot spin because it's already spinning canSpin = false; // animation tweeen for the spin: duration 12s, will rotate by (360 * rounds + degrees) degrees // the quadratic easing will simulate friction var spinTween = game.add.tween(wheel).to( { angle: 360 * rounds + degrees }, 12000, Phaser.Easing.Quadratic.Out, true); // once the tween is completed, call winPrize function spinTween.onComplete.add(this.winPrize, this); } }, // function to assign the prize winPrize() { // now we can spin the wheel again canSpin = true; // writing the prize you just won prizeText.text = slicePrizes[prize]; }, update: function() { game.physics.arcade.collide(arrow, dots); } } can anyone provide me some guidance for what to do next and what have i done wrong? The result i would like to achieve is similar to . So basically the arrow animation and controllable output/result. the attachment is the full project. please help wheel.7z
  14. TypeScript Best practices

    Hi, i'm looking for best pratices to start a phaser project with TypeScript. Most of the tutorials are not up to date (2013 on the site). What about project's structure (i mean directories, naming convention etc.), which tools etc ? EDIT : you can now download a complete Visual Studio Template for Phaser with TypeScript : (it's up to date and easy to install (VS Extension)) Regards, Fairy Regards,
  15. Starting in the field

    Hey everyone, i am new in this forum and also new to HTML5 games industry, i posting this here cause i was kinda lost in this forum and google researches, what really made me lost are articles and posts on forums which are out of dated, and things probably changed since then. i am a game developper since a while now and i have already made several cool games using game engines , which export to HTML of course after some code adjusting, and now i want to know how can i find offers or who to contact to publish my games on revenu sharing websites, or maybe even sell a non-exclusive version to some websites. i will show you guys some screenshots of my games, and tell me if my level is good enough for the market, and whats the next step i must do: Thanks for the help
  16. 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!
  17. 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.
  18. Order of events

    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
  19. Hi All, I have been playing with babylonjs for a couple of days now and excited about it. It's one of the few friendly/easier frameworks that I have come across so far. I even managed to import a couple of models into BJS successfully. But I have a problem and need your help. : ) This is the playground link, right now an arcrotatecamera rotates around a mesh. It gives an illusion that the mesh itself is being rotated, but when I move the object away from (0,0,0) it starts to show that the camera is rotating and not the object. Instead of such a camera hack, I would like to rotate the mesh itself from wherever it is, I googled and found a couple of topics in the forum, but the solutions are not as smooth or eased as the camera solution. It will be great if someone can help me on this. Cheers and thanks for your help in advance.
  20. mouse events for hex tiles

    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); } }
  21. 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.
  22. 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!
  23. 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.
  24. 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!
  25. 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 =)