Search the Community

Showing results for tags 'tutorial'.

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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 78 results

  1. Hello All, I run the site, which among other things... contains tutorials and tutorial series on using a variety of languages and game engines. Just here to announce that I've recently started a BabylonJS Tutorial Series. All entries in the series have both text and video versions. As of right now the series is quite small consisting of: Series Introduction Getting Started Cameras There is also an introduction/review/overview I did a while back as part of the Closer Look game engine series. The next two tutorials on are on lighting and materials, and where we should continue on from there, how long depends entirely on popularity. I will at the very least cover all of the basics. Right now these tutorials should be suitable for someone with Javascript ability but no prior Babylon or game development experience. Of course feedback and suggestions are always appreciated! Hope these are useful to some of you.
  2. Hello all This tutorial i wanted to publish for along time now . As i see that the indie IO games are building their servers in C++ . It is intro to writing MMO games but not with the usual Node.js and and similar. But this time i'm showing you how to assemble WebSocket server using libuv (node.js C networking lib) for the server networking and libwebsocktes for the web-sockets layer. All server side is in simple pure C And for client side im using Cocos2d-x the HTML5 version . Enjoy ! P.S im planing to do the same tutorial using more flexible c++ 11. And later i will publish tutorial about connecting the server with mongoDB for persistence So please register to my news latter list to get updates .
  3. Hello all, As some of you already knew it, I've been working on the a Babylon.js ebook for several months. Today, this book is finished, and I named it Learning Babylon.js. What is included in the book: - Getting started with Babylon.js (Hello world in 3D!) - Learn how to use primitives (box, spheres, torus,...), default cameras and lights - Detailed guide on materials and textures - Particles - Shadows - Collisions - Intersections - Physics engine (Oimo.js) - User inputs (keyboard/gamepad) - Animations - How to use exporters (3DSMax, Blender, Unity) - Shaders - Skeletons/bones - And more! The main goal of this book is to CREATE a whole game, chapter by chapter: start with the basics (cubes, spheres and torus), add materials, replace with custom 3D models exported from 3DSMax/Blender,... The game you will create is greatly inspired from the Super Monkey Ball serie. By the end of the book, you will have a complete game to play with, and (I hope!) enough knowledge to create your own. Sadly, I was not able to handle all Babylon.js features in this book alone (I would have spent a whole year on it, and DK is adding new features every day!), but I tried to cover as much as I can with one game. You can find some more information here :, as well as some screenshots of the book. I hope it will help you in your next Babylon.js projects. If you have any questions, remarks, I'm not far from this forum (as you know it:) )
  4. Hi there, I don't know if someone of you know this guy (Pedro Medeiro): He's creating very nice tutorials how to draw and animate pixel related graphics stuff. Amazing stuff inside! Regards, Christian
  5. I've followed , and now I am seeing the white fade-in when the game first loads, but it's loading directly to level 1 - the title screen doesn't load at all. No errors in the console. Demo at Code at Melon JS v3.1.0Mac OS 10.11.3Chrome Version 54.0.2840.98 (64-bit)
  6. Hi! I've started a tutorial about how to make HTML5 games great... Part1: tell me what you think... wolfgang...
  7. Hello ! There is a free complete course by Victor Mallet. It is about how to create a basic FPS : It is in french but with a translator, you may understand :
  8. My post about control mechanisms in JavaScript games was just published on Mozilla Hacks blog. It introduces a series of MDN articles about Implementing game control mechanisms: Mobile touch controls Desktop mouse and keyboard controls Desktop gamepad controls Unconventional controls The basic examples are available on GitHub at And the articles are using Phaser-based game Captain Rogers: Battle at Andromeda demo as a case study.
  9. A GameMaker developer, Heartbeat (@uheartbeast) has created an amazing tutorial video on how to make a 3D dungeon using GameMaker. I thought I'd post it here so people are made aware of this. It really doesn't use a lot of code to make a rudimentary 3D world in GameMaker. On the subject of 3D games made with Gamemaker, there is a game made using GameMaker, Intrude, currently on Steam that is basically Doom using a more advanced version of the tutorial below. I'm no relation to any of these two developers, I don't know them nor am I getting money for posting their work or anything like that. Just saw something and thought it was cool enough to post here.
  10. Since my previous post I have been wondering on how I can map tiles myself within Phaser using the slopes plugin. If I wanted to include tiles such as "hills" or different sorts of slopes, are there any good tutorials out there that explains this? It would be very beneficial to the game I am creating. I am using 32x32 tiles with arcade physics. I've read in this file I downloaded about a "Arcade Slopes converter" which I'm unsure about. I've included the current tile sheet I created and using to test things out as well as the full code. Any help is appreciated! This is my current code for the mapping of my tiles.,{ 1: 'FULL', 2: 'FULL', 3: 'FULL', 4: 'FULL', 5: 'FULL', 6: 'FULL', 7: 'FULL', 8: 'FULL', 9: 'HALF_TOP', 10: 'FULL', 12: 'FULL', 13: 'HALF_BOTTOM_LEFT', 14: 'HALF_BOTTOM_RIGHT', 15: 'HALF_BOTTOM_LEFT', }); Test Game Phaser.rar
  11. Hi, I'm going to start working on a darts game soon and I'm looking for any helpful reference, source code or tutorial that can help me with ideas, techniques and shortcuts. In case you know anyone or anything that can help me please let me know. For some reason I can't find anything like that in the web. I guess this type of games is not so popular... Thanks!
  12. Hi guys, The community need create more advanced websites using Pixi.js, exist any tutorial (free or not) to create websites using the canvas fullscreen with Pixi.js? For example: - - I can't find the best way to do that, guys help please! PD: What do you think about to create a PixiJS Market to find Pixi tools for games? Like Regards, Nicholls
  13. So yea, my internet was out yesterday and today... soooo I decided to go ahead and create my first written tutorial. Um I hope you like it? Comments, Concerns, Criticism?
  14. After getting some interest here, I started documenting the steps required to get my Phaser game on Steam: Part 1 - GreenlightPart 2 - Making it Look and Feel Like a PC GamePart 3 - Making an ExecutablePart 4 - Steamworks Original thread: Recently, my game Curvatron (made with Phaser) got greenlit on Steam, which means it will be available on that store soon. For what I gathered, there doesn't seem to be any other Phaser game on Steam right now, but I'm sure some of you are interested in doing this eventually. If there is any interest, I could document my steps toward getting the game there, including stuff like getting on Greenlight, getting greenlit, implementing the Steamworks API with stuff like achievements andleaderboards, etc. Would you be interested in this?
  15. Hello there! I am new to this community. As I did find it a bit difficult to find good resources to code with Phaser in TypeScript I decided to "track" my experiences and write tutorials as I proceed. For those who are interested: You find the tutorials in my git wiki here. I hope this will help. Feedback is always welcome. Eric
  16. 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
  17. SUMMARY: This post: HOW TO 2nd post: Original question that originated this post 3rd post: Research log concerning some problems and workarounds pertinent to this how-to THIS HOW-TO IS IN AN UNUSABLE STATE, AND HAS BEEN NOW ABANDONED. SORRY FOR THE NOISE. Okay, so after some hours of research here's what I came up with, in case anyone's interested or as a future reference for myself. These are the configuration steps to set up a Phaser project in Eclipse Mars.2 (4.5.2). I guess these might change from version to version, but remain essentially similar. You'll need to set up a local web server, but this is beyond the scope of these instructions. In my case I installed a WAMP (Windows-Apache-MySQL-PHP). 1. Head to and click on "clone". In my case this took me to: 2. Click on "Clone or download". A dialog unfolds with the git repository URL. Copy to clipboard. In my case it was: 3. Go to Eclipse and: Window->Perspective->Open perspective->Other->Git->Ok 4. Select to clone a Git repository. Paste in URI field->Next 5. Select All. Theoretically IIUC you should only need the "Master" branch. But I selected all just in case.->Next 6. It will want to clone in some default directory. It's okay like that, just copy the directory path to the clipboard for later.->Finish 7. Go tease you favorite pet/mate while the repository is cloning. 8. Window->Preferences->JavaScript->Include Path->User Libraries->New->Enter "Phaser" as the library name->Add folder->Paste in the "folder" field->Ok 9. Still in Preferences->General->Web Browser->Use external web browser->Select your html5 browser. In my case I left it at "Default system web browser", which is Chrome. 10. Still in Preferences->Server->Runtime Environments->Add->Basic->HTTP Server->Next->Enter your HTTP local server's web directory in the "Publishing Directory" field. In my case this was: "C:\wamp\www"->Finish->Ok 11. Window->Perspective->Open perspective->Other->Web->Ok 12. File->New->Static Web Project->Enter your project's name in the "Project name" field->Select HTTP Server in Target runtime->Finish 13. Right click on your project->Properties->JavaScript->Include Path->Libraries->Add a JavaScript Library->User Library->Select Phaser->Finish->Ok 14. Download or head to and look for the hello phaser example if the previous link didn't work->Unzip in a temporary folder and drag the contents to your project's "WebContent" folder in Eclipse.->Copy files->Ok 15. Right click on WebContent->Import->General->File System->Next->Browse to your git root directory\phaser\build->Select it->Ok->Check phaser.min.js->Finish->Overwrite?:Yes --- OR --- Use your system browser to open the aforementioned directory and drag phaser.min.js to your WebContent on Eclipse and overwrite. 16. Reformat your code from this: var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload () { } function create () { } function update () { } function render () { } to this: var state = new Phaser.State(); state.preload=preload; state.create=create; state.update=update; state.render=render; var game = new Phaser.Game(800, 600, Phaser.AUTO, '', state); function preload () { } function create () { } function update () { } function render () { } (More info about this in 3rd post) 17. Right click on your project->Run As->1 Run on Server->Basic->HTTP Server->Next->You might need to change your HTTP Port if your server doesn't default to listening on port 80->Finish Your project should have opened in your browser. NOTE: 1. I have no idea if step 14 is correct, or whether you need to include other files in your project's web content directory. 2. If Content Assist (that's what's called the feature I was calling autocomplete) doesn't pop up, hit CTRL+Spacebar. It should work and display Phaser's API documentation. 3. For following new projects you just need to follow steps: 12 to 17, as long as you don't switch your workspace, of course. 4. I will edit this post to reflect changes if you point out any errors in the procedure, etc. Cheers, Eneko P.S.: Setting up IDEs is always a nightmare, isn't it? Unless you got some template...
  18. I'm making single n-back game What is best way to show user how to play? What hotkeys are used? Should I make screenshoots with additional labels/arrows to explain GUI or is there a better way?
  19. I want to come up with a way to render my own car into the scene and it needs to look similar to the demo here in this link. I looked into the github repo of this project, I mean, where do I start? And whats a babylonmeshdata and babylonbinarymeshdata and how do we get that?
  20. Hello, here is a new classic game remade with a complete tutorial description, it use the Superpowers game editor (built on Threejs). You can address in this tutorial post your problems, propose change and ask for tutorial clarity. Or if you feel comfortable with that, you can open an issue on github or even can improve the tutorial directly by submitting pull requests for the markdown files in the github repository. You can also directly discuss about technical aspect of tutorial in the original post here. Thank you :-) SUPERPOWERS TUTORIAL #5 Super Pacman read gitbook tutorial --- play the game --- source assets --- source project Note : you can download fast zip for sources here.
  21. Hello, I made a tutorial for this little game I just released, I wanted to share it and take the opportunity to join the html5 game dev community. For the technology I use : it is Superpowers (which is a game editor based on threejs) and Typescript.
  22. I follow a Microsoft tutorial to show a scene that I exported from 3ds Max. The tutorial link is: The Babylon scene can be seen on the Sandbox, but not offline. Here is my page code: <!DOCTYPE html> <html xmlns=""> <head> <title>Using babylon.js - How to load a scene</title> <script src="babylon.js"></script> <script src="hand.js"></script> <script src="cannon.js"></script> <!-- optional physics engine --> <script src="oimo.js"></script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load("", "TestExportFrom3dsMax.babylon", engine, function (newScene) { // Wait for textures and shaders to be ready newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { newScene.render(); }); }); }, function (progress) { // To do: give progress feedback to user }); } </script> </body> </html> How to show the Babylon scene on web browser offline?
  23. Hello everyone! I just finished an article about how to contribute to Babylon.js engine (the exact same process can be applied to the Documentation, or any repository). It can be found here: It talks about creating a fork, cloning it, setting up Visual Studio compiler, and create a pull request. If you have any questions about it, I'll happy to help
  24. I've made an tutorial based on my approach to enemies in my Metroid Remake extending Phaser.Sprite into a generic Enemy class which in turn is extended to create actual enemies. The tutorial uses ES6/ES2015 but the approach could be used with ES5 (which the my code is actually transpiled to). It's my first tutorial ever. Both positive and (constructive) negative feedback is appreciated. Let me know if you find something you disagree with in my approach, or ways to improve it. Also, English isn't my native language so any feedback on how I could improve hard-to-understand parts is equally appreciated. Link: