Search the Community

Hi everyone! I was wondering which HTML 5 game engine is better PixieJS or Phaser.io? Links: Phaser.io: https://phaser.io PixieJS: https://www.pixijs.com

I would like to share a website I built with Phaser 3. I believe Phaser is going to change the way we interact with online content, and I would love to play a part in that change. Here is the website: https://cannabijoy.com/ Although I have a desktop version, I recommend you check it out on your smartphone. The entire website was built on my phone, so mobile browsers will get most of the attention. In fact, the only time I’ve used a PC is to make sure my code is working. The mini games are built to show off the capability of Phaser, but I’m currently working on a platform puzzler with my slingshot character. I do believe these are the first games built with Phaser that utilize a slingshot, and if my website becomes successful, I hope one day to teach the functionality in my tutorials. For now I’m trying to establish myself as a programmer, because I don’t actually work in this field. Any feedback will be greatly appreciated. Thanks for checking it out!

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!)

Hi gang! Here begins the never-ending thread... about babylon.js tutorials. Post freely in here - about any tutorial. Here in the early days of this thread, I would like us to talk mostly about 'the basic series' of tutorials: https://github.com/BabylonJS/Babylon.js/wiki/Tutorials We will need input from everyone. We will be doing test translations. We will be collecting pictures that are perfect for the tutorials. We will be collecting great ideas and always looking for ways to make things clear for all. Comment freely. Here are some early things that we are wanting your comments about: ---------- #1: The use of 'arg' and 'arguments'. ie. function(arg, arg, arg, arg). Early tutorials called them 'parameters'. In tutorial #6, I started using 'arg' and args. Does anyone think that 'arg', 'args', 'arguments', etc... is outdated or wrong? Is ECMA officially calling them parameters? Should we avoid calling them args and get back to 'parameters'? Thoughts? Comments? ---------- #2: The use of the term 'one-line constructor' (see tutorial 6). Here, we used 'constructor' to define a one-line Babylon scene item maker such as var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene); Does anyone think that 'constructor' is a bad term to use for that 'line'? For babylon.js, that single line scene item maker is not only a constructor... but also an 'installer', yes? In other frameworks, you first 'construct' (make) a scene item, and then you need to do scene.add(item). Babylon.js does the add for the user. Comments welcome... about 'constructor'. ---------- Hey, thanks, everyone! We will be watching this thread forever. No hurry on commenting, and feel free to change your minds and comments later. A special thanks to Dad72 for recently showing me that light.isEnabled PROPERTY... has been changed to .isEnabled() ... a getter FUNCTION. And that the new way to change a scene item 'enabled'... is with .setEnabled() function. His information not only fixed a section at the top of the #6 lights tutorial, but it fixed some personal projects as well. Thanks again, Dad72. camera_or_light_or_mesh.setEnabled(1 or 0); ... that is the way. But don't forget about light.intensity and scene.setActiveCamera[by](something) and mesh.visibility and StandardMaterial.alpha. All are good ways to think about... when you want to make things appear and disappear. Do not trust my typing. Be sure to visit http://doc.babylonjs.com to find the perfect syntax. The #6 lights tutorial is still being edited. I (Wingnut) hope to clarify the .direction property somewhat. Tutorial #5 about cameras... is scheduled for some work, soon. Feel free to comment about those things, or about anything in the GitHub tutorials. We are listening carefully. Be well!

Hello there! I recently published a very simple game called Coin Runner on my repository. It is written in Typescript and uses the newest version of Phaser 3 (3.3.0). Coin Runner It might be helpful for the ones who are new to Phaser 3 and want to learn the basics. In the future I will write a small tutorial for it and more games will come. Feedback is very welcome! Greetings,WizaEric

Writing playground based tutorials (PBTs) just got easier. Well a little bit easier than when it started in this thread. There are now methods available in the playground for anyone to highlight or hide lines in the editor and to build simple standard information and selection dialogue boxes. Documentation is available to describe the available functions with links to a couple of examples and how they were coded. Even if you do not want to write a full tutorial the functions can be used just to highlight some lines in your code or even to hide and unhide some lines as in this example https://www.babylonjs-playground.com/#NLMGJ2 A word of warning - I thought that this example was simple enough so I ignored my own advice from the documentation and just added the function to hide code straight into the playground and forgot to change a true to a false and ended up losing the code I needed to correct. So unless you are just using line decoration always write and edit the code in a text editor and copy and paste into a PG and Run to test, don't Save until you are sure everything is correct..

This demo https://economist-exposures-32112.netlify.com/ is inspired by @Wingnut's thoughts about a playground based tutorial. Whilst I have copied the PG code it is meant to be something different to the PG not a replacement. For a start the user cannot edit any code or do their own thing in anyway. It might not be what @Wingnut intends so consider it as the start of a proof of concept. This means you can ignore the style and the twee alien. The code can be found at https://github.com/BabylonJSGuide/InteractiveTutorials and the README gives some information on how I messed around the PG code. Currently there is only one tutorial and here is the code that runs it. Anyone interested in helping with further development of this - you would be most welcome.

I am looking for some guidance or example of how to integrate into my game the ability for users to create their own "player." I would like them to be able to select a character and then be able to customize that character (change hair; shape; body etc) prior to playing. I have searched extensively but have been unsuccessful in locating any assistance/tutorials/examples online for this type of action.

My Game Builder allows you to make games with JavaScript, Phaser, or no code at all. You can pull up your workstation from anywhere, at anytime, and work together on projects. There is real time "google docs" style collaboration. Any game you see can be viewed with full source to see exactly how every part was put together, and forked to make your own "mod" of it or to just mess around. Tutorials are included for art, programming, or whatever else you want to brush up on. http://build.games

Hi there, Can anyone here point me in the direction of a Live2D tutorial or library that would work with Phaser? This seems like an interesting concept and I have not seen anyone try this yet to my knowledge. http://www.live2d.com/en/ https://avgjs.github.io/pixi-live2d-example/ Thanks in advance!

Hello! Video tutorials are not available anymore. For example: http://doc.babylonjs.com/tutorials/3d_on_the_web_understanding_the_basics shows "Page Not found". Could you please fix that as video tutorials were very helpful! Thank you!

@ Someone : Just trying to go to tutorials from this page: Tutorials But clicking on a tutorial results in a 404 page not found. Are the links missing "/tutorials/" ? cheers, gryff

Spanish: ¡Buenas! He colaborado con un usuario de Youtube para crear un curso básico de iniciación en Phaser. Con estos tutoriales podrás ir adentrándote en la programación de videojuegos con el framework Phaser (que nos ofrece muchas facilidades). Espero que les sea de ayuda. English: Hey! I've collaborated with a YouTube user to create a basic introductory course in Phaser. With these tutorials you'll go adentrándote in game programming framework with Phaser (which offers many facilities). I hope it will help.

I have been looking over the forum and such and through various resources and decided to throw together some things for new comers and such. If you want to add to the list, just reply and I will get around to it. I will be adding more as I come across them as well. Legend [$] Must Purchase [/$] Purchase but has Trial Version [//$] Must Purchase if for commercial Assets SoundImage Books, Tutorials and Videos [$] Create a procedrual endless runner [$] Create a vertical endless runner [$] Discover Phaser [$] From null to full HTML5 [$] Interphase [$] Mobile Development [$] Scale Manager Guide [$] Tween Manager Guide Full Source Games Phaser Games Pack #1 Plugins Arcade Slopes by hexus [$] Box2D Premium by Photonstorm Grid Physics by crffty Island JS by luckylooke Isometric Plugin by lewster32 [$] Particle Storm by Photonstorm Phaser Animator by Kody Bentley Phaser Bones by silashatfield Phaser Inspector by netcell [//$]Registry Plugin by Phreaknation [$] Virtual Joystick by Photonstorm [$] Waveforms Path Editor by Photonstorm Tools Leshy SpriteSheet Tool by Leshy Labs [$] Phaser Editor [/$] Texture Packer

Here's me giving back to the community by sharing my own knowledge and adventure in Phaser: New: Jan 9, 2017 - https://www.programmingmind.com/phaser/topdown-layers-moving-and-collision Past: https://www.programmingmind.com/phaser/fun-with-spells-using-phaser https://www.programmingmind.com/phaser/stop-particles-from-sliding-in-phaser Hope you guys enjoy!

I've started a series of tutorials for Phaser developers on how to design and publish a game aimed at Desktop, Console and Mobile and publish it in the Windows 10 Store and on Steam Greenlight. This is based on my experiences developing and releasing http://www.mekphobia.com The series will also cover targeting other platforms (such as Android and iOS) with the same code base. You can find the first of these tutorials at: http://www.mekaphobia.com/developers/introduction.htm

https://pryme8.github.io/NeatFlax/ Just got this up to start putting a central link for all my tutorials... Anyone else want to submit some and we can host it here and add it to the directory? Just post a link of a tutorial you own the rights to Ill review it and post it for you with credits on neatFlax ha i love that name. Im not done with it yet, but https://pryme8.github.io/NeatFlax/webWork/ is gonna be one of the first ones on there, then ill move my noise tutorial over as well and start compiling some of my other lessons. *EDIT* Ohh yeah guidelines! Pretty much anything that will benefit game design, a lot will be targeted to BJS. Playgrounds are submit-able, but please have an accompanying write up with incremental playground links showing the steps. A 500x500 pxl 96dpi showcase image.

Hello everyone, Background: I have been looking around for a good engine/framework to use to build HTML5 games. Since I know Unity and am familiar with the engine (plus I know my around C# a bit) I wanted to use to create HTML5 games, however the WebGL isn't quite up to par not to mention that it doesn't work on mobile browsers. So I went ahead and switched to Construct 2, now I am quite familiar with it and have used it for a long time before the switch (in fact I started with Construct 2 and then switched to Unity for making non-HTML5 games). While Construct 2 is perfect for me (since I am more of a designer than a programmer), I figured that to do this seriously I can't escape learning to code specially that my goal is to transition to multiplayer games (where Construct 2 fails to have an authoritative server setup and sticks to the P2P setup -- but that leagues away from where I am now). Deciding that, I spent the past 2 days looking at code and comparing frameworks and I've settled that so far Phaser seems to be the best free engine and has the most support in the HTML5 game development scene (unless I am missing something). So I started using that and followed the first platformer tutorial, which needless to say while good, left me lost and note sure what is going on with a few things. As mentioned I come from a background with Visual Studio in terms of coding, so I'd like to keep Intellisense-kind of feature. I heard of Phaser Editor and I tried to give it a spin but unfortunately it didn't offer the level I had with Visual Studio (and I am not putting any blame here, it is an incredible tool and perhaps I am using it wrong -- I guess that would be more akin to the truth). That and the fact that I can't fork $30 for it at the current moment. The main problem: I would like to use VS 2015 Community edition and get the intellisense I get with Unity (now I understand that there may not be a solution for this and it might not work 100% as Unity's but I'll settle for anything at the moment that actually helps with the Phaser API rather than just Javascript code -- I don't need VS to complete "var" or "function" for me). What I have done is that I looked into the VS plugin market and found a Phaser template that uses JS and I downloaded that. However when I open a new project using that template and then start typing something like var Game = new Phaser.Game(blah, blah); it doesn't recognize anything beyond "var". I only found a way on the internet if I use Typescript (which I would rather avoid so I can learn JS and later on be able to pickup Node.JS instead of having to learn Typescript then start learning JS with Node.JS). So my question is, how can I use JS with VS and Phaser while VS2015 having intellisense active with Phaser related stuff? Secondary problem: I am searching for tutorials similar to that on the Unity Learning website. Something that does a lot of hand holding with a few small KISS games and then moves into advanced stuff while still explaining what is going on. So far what I have seen is either tutorials that has no steps and just go "Here is the code I used" or others that provide steps but general explanation and no "real learning" could occur from there. Like I said, I am not a coder and need a bit of hand holding at the start till I have built a few example games and then start doing my own. Where can I find such tutorials? TLDR: I'd like t use VS2015 with Phaser for intellisense but code in JS not Typescript. Also would like some tutotrials that actually explain what is going on and teach rather than just dump information on you -- tutorials that go through making game with hand holding and then scale up as we move on. Sorry for the long post and thank you so much in advance!

i'm experimenting with javascript and trying to implement a turn based Risk game. I can't find any tutorials or books and need some tips. Even any tips or guides on making a world map would be great. Thanks.

Hey everyone! Just wanted to share our new project on Kickstarter: CODEMURAI, a mobile app to learn programming while on the ego. The app will include modules on Phaser (or perhaps Lazer, depending on what's mainly being used in 6 months or so). If you are interested in learning more and supporting this is the link: https://www.kickstarter.com/projects/pablofarias/learn-to-make-games-apps-and-websites-on-your-phon If you have any questions let me know!

Just throwing this out there, but is it worth a dedicated tutorial/link section in each framework subforum? I see a lot of small implementation posts that would be covered by links to current tutorials/examples/demos. I'd see it as a sticky thread, with a sticky post with a contents inside. The contents contains major version headings for the framework and a link to posts within the framework subforum of where the tutorial can be found or an external link. The only requisite for the tutorials would be that they are kept up to date, this can be partly mitigated by moderating the contents post every 6/12 months (obviously adding popular tutorials as they are created) and ditching any that are out-of-date or simply no longer accurate. This would be a fairly minimal job for a moderator but would add a quality content dictionary to the site for each frameworks supported by the forums. Conversation about tutorials still happens in the thread that creates the tutorial, the contents thread is simply for posting links to tutorials, which eventually get moderated into the sticky content post at the top of the contents thread. It seems that there is plenty of content out there regarding examples and tutorials, just that its sometimes hard for users, particularly new users, to find that content. I'm loathe to suggest each subforum has a huge number of stickies, I'm just mindful that there are a lot of duplicate posts and finding accurate and up-to-date answers to 'regular' questions should be easier. Same could probably be said about plugins for those frameworks. I'd like to see community moderation, probably via likes, but thats more of a change to how the forum works. How does everyone feel about this suggestion?

Hi Everyone! This is a call out for pixi.js tutorials! Pixi is taking off nicely and you guys have already done some amazing things with it. The thing we could really do with though are some tutorials to help the newcomers get to grips with it. We'll be writing some new guides of our own, but we'd really love to throw the floor open to any of you who fancy writing a tutorial on Pixi's various features. To get things started, we'd really love to see some tutorials based on the examples for: - Loading assets - Using Sprite Sheets / Texture Packer - Creating MovieClips - A Pixi.js Mini game Full accreditation / props will of course be given and we will be forever in your debt ;o) Cheers! Mat

Initial SetupUsing last version from GitHubgit clone -b develop https://github.com/ekelokorpi/panda.js-engine.git Install a local web server. Create a folder on your server, with the name of the project. Copy the content of the src folder of the cloned repository. Open projectfolder/game/main.js in your favorite code editor and start coding!New ProjectSetup config.js (http://www.ninjadoodle.com/blog/panda-js-config/ updated for V. 2 ?) http://www.ninjadoodle.com/blog/panda-js-setup/ (updated for v.2 ?) Multiresolution Workflowhttp://www.ninjadoodle.com/blog/panda-js-hires-retina-and-scaling/ (Updated for V. 2 ?) Useful Tools2DSHOEBOX: http://renderhjs.net/shoebox/ReferencesCHEATSHEET: http://www.pandajs.net/cheatsheet/FIDDLER: http://vermeire.home.xs4all.nl/panda/PANDAJS YOUTUBE CHANNEL: https://www.youtube.com/user/pandajsengine

Hi, My name is Pavel I have started a series of Tiled Game Engine posts and will update it weekly if possible and will share my experiences and knowledge i learn wile making MMO RPG during several years of development as indie. I'll cover creation of Javascript based game engine from the ground, how to work with new API of HTML5, like XMLHttpRequest2, WebWorkers, WebSockets and etc. Several design patterns will be covered from performance and memory usage perspective. Currently Tiled Game Engine can works with tiled map of 1500x1500 dimension, more than 100 animated units on the screen simultaneously and more than 1000 units off-screen. The source code of that engine will be available on GitHub. Part 1: Game Loop Part 2: Stages, Assets and Loading Stage Hope not only to share my expertise, but get your feedbacks if any. Best regards,Pavel

I recently started learning Pixi.js and it is a wonderful library. However, it's hard for me to just look at examples and code and understand the mechanics. So, I started scouring google for tutorials on Pixi. But it's hard out there to find a decent tutorial, though I did find a few. So, I created a github repository to keep track of good tutorials. https://github.com/aksharpatel47/Learn-Pixi.js It only contains tutorials that have not been mentioned on the pixi's website or goodboydigital's blog. If you have any link that I can add, please reply or send in a pull request. It will be helpful to the community. Thanks.