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 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 49 results

  1. Good day folks! Im completely brand new to Babylon (3D site building in general) and have become an instant fan! Im having a few issues and would like to see if folks can help: 1. I want to have 4 boxes on my site and align 2 on the right and 2 on the left (Such as the "Fashion Show" demo on the main page), how to go about doing this? 2. I want to make my logo and place it between the boxes, any recommendations on how to make this happen? 3. Also I want to place images on the boxes and link them to another site when a person clicks them, how do an ahref in this type enviorment? 4. I would like to change the canvas to black, how to do this? Thank you for all your help💋 Meka
  2. supersushi

    Game dimensions in Typescript

    Hi! I have been looking for 2 days how to get the full width and height of the game in Typescript. For example, I want to place a gameobject randomly but within the visible bounds. In javascript I have seen solutions mentioning ``, or `` etc. But nothing in TS. Thanks for your help, A super-novice
  3. Zyie

    Organising Code

    Hi, so I'm very new to Pixi.js and javascript, coming from a c++ background I am lost without my classes. Can anyone explain to me what a basic template should look like for starting a Pixi.js game and you guys go about organising the code into separate files? I currently have one big blob of code in a single file, as all the tutorials i found only use one. Any help you can give will be much appreciated. edit: so i finished the game i'll leave a link and any feedback on the code would be helpful also does anyone know how to scale the size of the renderer for different screen sizes? GAME LINK:
  4. hundo.chester

    Bug, or i don't understand well

    I have this scene, and whenever the zombie touches my debug object, it should turn velocity to 0, stop walking animation , and start attack animation, Not working (animation is stopped too): Working (but not what I want): if I turn velocity to anything but 0, i will start moving again, but i don't want this... is this a bug, or a feature? how could i stop the zombie movement, but continue the "attack" animation ?
  5. Hi ! I precise that my question is only about meshes Should we prefer to load small objects (between 0 and 10 units for example, with a high precision like 5.554) or it does not impact performance at all and we can work with huge numbers as well (10k, 100k) ? I speak about width/height of a box for example. I guess the more important things are the number of vertices/edges/facets and how impostors are used (mesh vs box), but I would like to know regardless of that, if the size of meshes matters. Same for textures : should we prefer a texture repeated 1000 times on a plane or a bigger texture repeated 10 times for example ? Thank you
  6. SatriaAI

    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
  7. Hello guys, I'm new to game development but I have some background on HTML/CSS/JS that's why I found Phaser perfect for me. So far I'm really loving it but can't understand some basic game logics. For example: What is the best way to build platforms? I was reading about groups but not sure is it the right way to do it. Let's just say that I have sprite and I want to build specific pattern. So far I tried : Every platform is diffrent sprite Using single tile to build platforms Also is there any books or other sources for information about game logics and good practices? Thank you and sorry for my bad English
  8. 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 !"; } }
  9. 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
  10. estudillod

    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
  11. 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...
  12. freddythenoob

    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
  13. 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.
  14. DudeshootMankill

    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.
  15. ben0bi

    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.
  16. CindySchroer

    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
  17. 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.
  18. GarryMcKee

    Where is the API Documentation?

    Hey Folks, Apologies in advance if this was blindingly obvious and I've wasted a forum topic.... I've just started using phaser and would like to start perusing the different methods/classes etc... I cannot quite seem to find API documentation to this effect however, could anyone please advise? Thanks and Regards, Garry
  19. 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.
  20. WiLD11

    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
  21. 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
  22. Fairydhwen

    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,
  23. 12walid34

    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
  24. 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!
  25. 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.