Search the Community

Showing results for tags 'tutorial'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 113 results

  1. noobshit

    In game tutorial/help

    I'm making single n-back game https://noobshit.github.io/ 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?
  2. 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 http://www.babylonjs.com/Demos/TheCar/ 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?
  3. 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 http://phaser.io/download/stable and click on "clone". In my case this took me to: https://github.com/photonstorm/phaser/tree/v2.4.8 2. Click on "Clone or download". A dialog unfolds with the git repository URL. Copy to clipboard. In my case it was: https://github.com/photonstorm/phaser.git 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 https://github.com/photonstorm/phaser/raw/master/resources/tutorials/01%20Getting%20Started/hellophaser.zip or head to http://phaser.io/tutorials/getting-started/part6 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...
  4. mseyne

    [Tutorial] Pacman

    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.
  5. 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.
  6. I follow a Microsoft tutorial to show a scene that I exported from 3ds Max. The tutorial link is: https://blogs.msdn.microsoft.com/eternalcoding/2013/06/28/babylon-js-how-to-load-a-babylon-file-produced-with-blender/ The Babylon scene can be seen on the Sandbox, but not offline. Here is my page code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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?
  7. 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: http://pixelcodr.com/tutos/contribute/contribute.html 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
  8. 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: http://metroid.niklasberg.se/2016/02/12/phaser-making-and-using-a-generic-enemy-class-es6es2015/
  9. Hello & Thanks , Windows 10 x64 I am anxious to learn pixi.js but : http://www.goodboydigital.com/pixi-js-tutorial-getting-started/ The example above works on Edge browser , but doesn't work on Chrome . Is there a fix for this ? Pls , aim me at a good tutorial . Thanks...Vern
  10. Hi all, Regarding Reddit JSON API, you can get a JSON document by adding /.json to any Reddit URL. This can be used to extract various data from any subreddit making an image viewer/browser for instance. Furthermore, all images and their data scraped from a Reddit JSON could be also used to make some simple games. Here are some ideas: guessing which of two images has a better/worse upvotes scoreguessing a right range of upvotes for an image choosing between 2 or 3 different rangesguessing a title of an image choosing between 2 or 3 different titles as fast as possibleSo I decided to create a game based on some of these ideas in HTML5 using Phaser framework. But first of all, I need a tool for scraping images from a Reddit JSON file and I made it. The application and a short tutorial about its creation with the fully commented source code can be found here: http://www.askforgametask.com/2015/12/07/reddit-image-scraper/ In the next step I will try to make an HTML5 game using database of images generated by this tool.
  11. zeke_chan

    [Tutorial] Asteroids remake with Phaser

    [uPDATE: 13 November] Part 4 of this series has been published. You can find it here: http://www.zekechan.net/asteroids-html5-game-tutorial-4/ ---------------------------------------------- Hey everyone, I've been writing a new tutorial series on recreating the classic Asteroids with Phaser. Tutorial Outline The steps for this series includes: 1. Project setup 2. Player ship 3. Creating a single screen game world 4. Adding asteroids 5. Adding player lives 6. Adding sounds 7. The main menu state Links to tutorial http://www.zekechan.net/asteroids-html5-game-tutorial-1/ http://www.zekechan.net/asteroids-html5-game-tutorial-2/ http://www.zekechan.net/asteroids-html5-game-tutorial-3/ I will be posting updates every Friday so either check back or subscribe to my newsletter. Let me know if you find this helpful and of value. Also, if you spot any errors or parts that are unclear, do let know so I can improve =)
  12. Hi, The last version of Phaser Editor is ready to download! This is a Release Candidate version (Phaser Editor RC 15.11). This time we are also releasing new great stuff: The website was reworked with a new look.We created a blog to keep you updated and write about the great features around Phaser Editor.In the blog you will find a quick start guide to help you with the main tasks. This guide includes 8 video demos.The subscription form was moved to a professional website so we can give you a better newsletter.This release is an evaluation product but with no expiration date, it just shows a warning message from time to time. For more details read the release notes. For the final release we are considering to open the source code under a MIT license. Enjoy Phaser Editor! Arian Fornaris
  13. Hello all as you remember if not here is the [LINK](http://www.html5gamedevs.com/topic/17611-i-wrote-4-part-tutorial-how-to-build-snake-game-using-cocos2d-x-html5-version/#entry99247) to my previous post. Now i done writing another 3 tutorials that covers Desktop and iOS. and in the end they will all use 1 code base. Snake Game Using Cocos2d-x Javascript Desktop - PART 5 Snake Game Using Cocos2d-x Javascript iOS - PART 6 Snake Game Using Cocos2d-x Javascript iOS- PART 7 The final game played by my kids: The source code : Snake Game Final version source code Next tutorial will be for android. Enjoy!
  14. Hello all I started to write tutorials blog about game development,especially exploring the options developer have when developing cross platform games using open source tools. for the first tutorial series i developed simple snake game which i plan to show how to implement it for the web,mobile and desktop. the framework i chose is Cocos2d-x. it is mature and professional and above all it is open source. and have great JS/Lua support. i will use JavaScript as my language for this. way ? Because it is easy and accessible. easy to learn for beginners. First part is for the web: Snake Game Using Cocos2d-x HTML5 - PART 1 Snake Game Using Cocos2d-x HTML5 - PART 2 Snake Game Using Cocos2d-x HTML5 - PART 3 Snake Game Using Cocos2d-x HTML5 - PART 4 To play the final game : Snake Game for the web The source code: Snake Game source code Please note that this is the first draft , i will happy to get Feedback so i could iterate and improve. Thanks
  15. After getting some interest here, I started documenting the steps required to get my Phaser game on Steam: Part 1 - Greenlight Part 2 - Making it Look and Feel Like a PC Game Part 3 - Making an Executable Part 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?
  16. 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 : http://learningbabylonjs.com/, 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:) )
  17. Hi guys, How I can scale a website using Phaser as http://flashvhtml.com/? exist any tutorial? I think it's very interesting! Regards
  18. 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 http://www.zekechan.net/getting-started-html5-game-development-pong1/ Source files https://github.com/zekechan/phaser-html5-tutorial-pong 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 =)
  19. Hi, My name is Nikky Oryzano, Besides doing 2D art service ($14 / hour rate, you can contact me at oryzano@gmail.com for this). I am also doing a step by step 2D art tutorial, hopefully that can help out others / developers / new designers, for them to learn and have an idea on how to make art in vector. Please follow my instagram for updates on more art tutorial : https://instagram.com/nikky_oryzano/ Follow My Twitter : https://twitter.com/Oryzano_Game
  20. We are looking for tutorial writers who can create content around Phaser and/or Unity. Looking to have one tutorial published a week. If interested please apply here. The tutorials will go in our blog GameDev Academy which focuses on game development tutorials using different technologies.
  21. MishaShapo

    Tutorial For Endless Runner?

    I've searched the Community Tutorials and I've Googled around, but I haven't been able to find a tutorial for an endless runner like Jetpack Joyride. I've seen the "Spring Ninja" tutorial but I am looking for something more complex. Specifically, I want to answer: How do I continuously load predefined tilemaps and unload them once they are off screen?Should I make the player traverse through the tilemap or make the tilemap move. Thank you for reading and helping. =)
  22. AbdSab

    Javascript canvas tuto

    Hi all, i just want to share with a serie of tutorials to make an Html5 without any framework, just using the canvas, So without talking alot here is the part 1: If you liked the style of this video you can find the other parts in the channel: And thank's for watching
  23. crayonHero

    Panda.js complete beginner tutorial ?

    Hello guys I am a flash game developer and want to make some html 5 games for web and mobile for fun While searching for html 5 game engines I found panda.js I think this is a perfect game engine for me but I don't seem to find any tutorial aimed towards complete beginner which tells how to set up the project and how to start things. I know javascript but I don't know how to use it with this engine. Please anyone if you know about any beginner tutorial please tell me ! Please! I really like this engine ( I love pandas ) Cheers, crayonHero
  24. Cian Games

    Upgrading to melonJS 2.1

    Hi guys With the release of melonJS 2.1 version (check the Official Announcement ), is time to conduct a upgrade to it: Upgrading to melonJS 2.1 The upgrade from melonJS 2.0 to melonJS 2.1 is easy, making it a good and right choice. Take a look at it Thanks!
  25. Just published a collection of 6 video tutorials on Phaser, covering mainly setting up a new game and working with sprites (positioning, scaling, flipping and rotation), aimed at total beginners. Phaser Beginners Tutorial - Working with Sprites These videos are part of my Kickstarter-funded course on Phaser (still in the making but 33% available already).