Search the Community

Help pls me to choose right language for beginner . I found online courses about C# here , you can recommend other learning resources or other language for start.

I need help understanding how to use PixiJS through npm to run the example on the Docs Index page.

Hello guys ! I wrote my first tutorial on Babylon.js here : http://pixelcodr.com/tutos/toad_attack/toad_attack.html I introduce several notions, as : - basic stuff (getting started, sphere, box, ....) - import a custom mesh (as a babylon file) - materials - texture - skybox - basic animations My goal is not to fully describe all these elements (because it is already well done in the Github wiki), but it is more 'learning by trying'. By creating simple simple, I hope it wil help newcomers by showing how easy Babylon is. Don't hesitate to send me your feedbacks, there are very valuable for me as you got already some experience with babylon, and it will surely increase the quality of future tutorials I plan to write. Thank you guys ! Keep the webgl games coming Cheers ! EDIT : Here is (for now) the complete list of tutorials: - Learn the basics: http://pixelcodr.com/tutos/toad_attack/toad_attack.html - Interactions with the Actions system: http://pixelcodr.com/tutos/plane/plane.html - Physics engine (with Oimo): http://pixelcodr.com/tutos/oimo/oimo.html - Manipulate vertices of an object (for procedural generation for example): http://pixelcodr.com/tutos/trees/trees.html - How to create a loading screen by creating a preloader: http://pixelcodr.com/tutos/preloader/preloader.html- Create a simple FPS game : http://pixelcodr.com/tutos/shooter/shooter.html- Play with physics and Oimo.js : http://pixelcodr.com/tutos/physics/physics.html (new!)

How can one create group sprite at intervals? Here is my code <code> function createPlate() { this.add.group ({ key: 'goodPlate', repeat: 4, setXY: { x: 70, y: 100, stepX: 120, stepY: 20 } }); } this.time.events.loop(3000, createPlate, this); </code>

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

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 `this.game.width`, or `this.game.scale.width` etc. But nothing in TS. Thanks for your help, A super-novice

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: https://github.com/SeanBurns221/Pixi.js-Game

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): http://cypunkdb.net/t/phaser/tut0/nok.html 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... http://cypunkdb.net/t/phaser/tut0/ok.html is this a bug, or a feature? how could i stop the zombie movement, but continue the "attack" animation ?

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

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

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

I've follow the example in phaser.io 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

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, game.world.height - 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

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

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

http://babylonjs-playground.com/#A83GX#0 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.

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 () { this.game.state.start("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.

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. https://github.com/ben0bi/RUNPIXI.js

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

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.

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

Hello Forum I have started to creating a game with phaser.io . 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 phaser.io 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 phaser.io? Is there some issues with the old one, what is better? Or can I make it like I want at the end? Thank you.

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

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 = game.add.group(); 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(game.world.centerX, 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 https://www.youtube.com/watch?v=Gm9kftOieYI . So basically the arrow animation and controllable output/result. the attachment is the full project. please help wheel.7z

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)) https://visualstudiogallery.msdn.microsoft.com/ee6e6d8c-c837-41fb-886a-6b50ae2d06a2 https://github.com/fairydhwen/PhaserTypeScriptTemplate/blob/master/README.md Regards, Fairy Regards,