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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 96 results

  1. 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..
  2. Tutorial: Using Ionic in PlayCanvas

    This tutorial aims to introduce the Ionic to PlayCanvas template project. Using the Ionic Framework PlayCanvas applications can deliver a great mobile-friendly UX with a minimal effort. http://pirron.one/playingincanvas/using-ionic-playcanvas Ionic is an excellent framework that makes it easy to build great UI experiences for all kind of devices. PlayCanvas is an amazing tool providing interactive content experiences in the web.
  3. Hi! This is a tutorial series on how to convert an existing Unity project to PlayCanvas. I saw the need for something like this, as I have been contracted several times to convert Unity codebases to WebGL/PlayCanvas to support HTML 5/mobile deployment. Let me know if you find this useful! http://pirron.one/playingincanvas/converting-unity3d-project-playcanvas-part-1
  4. Tutorial: Texture masks using a shader

    Hi! I started a blog with tutorials about PlayCanvas and WebGL development. This is one of the first tutorials, on how to use shaders to mask and animate textures in real time. Let me know if you find this useful! http://pirron.one/playingincanvas/texture-masks-using-shader You can follow this tutorials on twitter as well: https://twitter.com/playingincanvas
  5. Good afternoon, I am attempting to run the first tutorial of Phaser JS (https://phaser.io/tutorials/making-your-first-phaser-game/part2) after you setup your local server and save the files to the web root. This is the error I am getting when trying to put the star on the black background: Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/wamp64/www/phaser_tutorial_02/assets/star.png may not be loaded. at Object.b.createWebGLTexture (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:13974) at b.WebGLSpriteBatch.flush (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:22659) at b.WebGLSpriteBatch.render (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:20300) at b.Image.b.Sprite._renderWebGL (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:3:13555) at b.Stage.b.DisplayObjectContainer._renderWebGL (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:3:10848) at b.WebGLRenderer.renderDisplayObject (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:12898) at b.WebGLRenderer.render (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:12357) at b.Game.update (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:8:1288) at b.RequestAnimationFrame.updateRAF (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:11:18693) at window.requestAnimationFrame.forceSetTimeOut._onLoop (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:11:18587) Can someone help me solve this mystery. I am using Wamp and I am running the files through the localhost web server. Thank you so much for your help in advance, i am very excited to start coding games with Phaser. I have a degree in Web application development but I have yet to make a game. - Brian
  6. This is the phaser multiplayer game series continuation. In this tutorial, we manage food in the server and generate them in the client like many other io games. http://gojasonyang.com/post/phaserMultiplayerGamePart4.html
  7. This is a continuation of Phaser multiplayer game tutorial with Node.js server and socket.io. This is part 3 and we're implementing some simple agar.io game mechanics with authoritative server. Part 3: http://gojasonyang.com/post/phaserMultiplayerGamePart3.html
  8. Hi, i witnessed the weirdest behavior while following the make your own phaser game tutorial. At one point in the tutorial (between parts 5 and 6 ) it is explained how to make the player collide with the ground instead of going through it. Basically, the weird thing is that i copy/pasted the whole code from part 6 (not only the script, but the whole html page) in the part5.html file and the player still goes through the ground when i access part5.html, although it works as intended when i access part6.html. I wonder how can the exact same code produce different behaviors. This happened using vivaldi browser, and the code works as intended when i try it with chrome and firefox. I am very intrigued by this, can someone please explain ?
  9. This is a continuation of Multiplayer game tutorial series. On this part 2 tutorial, we make authoritative server for security purposes. We're using physics in the server (p2 physics) Tutorial here: http://gojasonyang.com/post/phaserMultiplayerGamePart2.html If there's any question, please feel free to ask questions on my site.
  10. I wrote my very first blog post. It's a tutorial on how to create a multiplayer game with phaser in the client, and Node.js in the server: The server uses Socket.io and Express.js. Part 1: http://gojasonyang.com/post/phaserMultiplayerGamePart1.html It's for complete beginners who aren't familiar with Node.js and Phaser. I hope someone finds it useful if it's their first time working with Phaser and Node.js !!
  11. Parts 2 & 3 of my new series, How to make Slither.io with Phaser, are here! Part 2 - Creating your first snake: https://loonride.com/learn/phaser/slither-io-part-2 Part 3 - Extending snakes to be players or bots: https://loonride.com/learn/phaser/slither-io-part-3 Enjoy!
  12. Hi, I’ve just finished a big tutorial explaining why and how to build a cross-platforms VR experience using WebVR and Babylon.js: https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-webvr-experiences-with-babylon-js-on-all-platforms/ It contains a lot of samples to: - Create a scene running on smartphone using the Device Orientation fallback, on Mixed Reality headset in Edge and Oculus Rift / HTC Vive in Firefox / Chromium using WebVR. - Show how to teleport either using the gamepad and a gaze approach or using a VR controllers if available (will be our case by the end of the year with RS3) - Show how to interact with items using gaze or VR controllers I’ve been able to demonstrate some of its content to various French meetups and people were amazed by the quality of the rendering and possibilities. We still have some work to do to simplify WebVR usage compared to A-Frame for instance, but it's planned for 3.1 of Babylon.js. In the meantime, test our Mansion VR experience: http://playground.babylonjs.com/frame.html#QWIJYE#6 either on your smartphone using Cardboard, in Edge with a MR headset or in your Oculus / Vive in Firefox 55 beta! Feel free to spread the world also RT my tweet: https://twitter.com/davrous/status/883416521057456129 Thanks, David
  13. 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
  14. Hello everyone, I'm currently doing some tests with the DynamicTexture system that could be used to add a new tutorial. The final goal is to have one picture on a plane. When I click on some button I will activate an animation managed by Babylon (if it's possible) so I can fade in and fade out the pictures. I had a first method where I wanted to add a canvas inside the canvas but that didn't work out : http://www.babylonjs-playground.com/#B9HGX0#3 Now I have one texture fading in and fading out automatically : http://www.babylonjs-playground.com/#B9HGX0#5 To be continued...
  15. Check out our new tutorial, Phaser Cars & Trucks with P2: https://loonride.com/learn/phaser/p2-truck We will cover constraining wheels to the truck body, increasing wheel grip, and creating a bouncy chassis effect that is seen in many popular games today. See what you will learn to create: https://loonride.com/examples/bouncy-truck
  16. I've just started the first tutorial, following the instructions and am at the bit where you open part1.html. When I do that there is an error in line 17: Phaser is not defined, please fix or add /"global Phaser"/ If I ignore it and carry on with the rest of the tutorial, I get to the bit where you make the star appear in the upper-left-hand corner, but all I get is a little yellow box with "script 0px x 0px" in it, but minimising and maximising the browser makes the star appear instead.
  17. Hi, I've been working on multiplayer online experiences with Phaser, Node.js and Socket.io recently. I thought that it might be interesting to make a tutorial detailing how to make a very basic multiplayer game with these tools, so here it is : How to make a multiplayer online game with Phaser, Socket.io and Node.js . As I said, the game (which can be played here) is very very basic: you click on the small map and your character moves to where you clicked. The movements of the other players (if any) are displayed in real-time. No animations or collisions or whatever, the focus is on the networking aspect. Feedback is more than welcome, as this is my first tutorial ever. If you find it interesting and would like me to make follow-up tutorials on some aspects, don't hesitate to ask! Jérôme
  18. How To Make Games Without Coding (using Construct 2) You have a head full of game ideas and game mechanics, but your time is limited, or you lack the programming chops to create these ideas at a productive pace. You let Caleb show you how you can totally make awesome stuff with Construct 2. Once upon a time, Caleb was a game designer who relied on programmers to help make concepts become a reality. But discovering Construct 2 changed all that, empowering him to be able to develop ideas and games completely on his own! Caleb will show you how powerful Construct 2 is and how its HTML5 foundation allows you to reach nearly every platform out there. He will show you how to make a game from soup to nuts so you can go home and bring your ideas to life! Highlights: General layout of Construct 2 (navigation) Quickly get things moving / happening (touch, mouse, keyboard, joystick) Work with graphics and animations (sprites) Make things come to life without code (events) Quickly work with physics behaviors and more (behaviors) Explore the world of community created extensions (plug-ins) Understand the many ad, IAP and cross promotional plug-ins available (monetization) Cover all of the export/platform options available (app stores) Simple, but helpful tricks Caleb wish he knew when he was starting out (pro tips) Making a full game (assets provided) together ready to publish on your app store of choice. Some Tutorials to start your first game: How to make a Space Shooter : https://www.youtube.com/playlist?list=PL0DZV6c9xy7dkoRe2XupAcbnXZrHclTfv Build an RPG : https://www.youtube.com/playlist?list=PL0DZV6c9xy7cFHqLgc31a5vtPl0_psI95 Construct 2 Basics : https://www.youtube.com/playlist?list=PL0DZV6c9xy7cK-L0ibaP7qHDRcP1Kmg7L How to Make a Platformer Game : https://www.youtube.com/playlist?list=PL0DZV6c9xy7fifhkala4fcY5U9DRnPLUE How to Make a Car Parking Game : https://www.youtube.com/playlist?list=PL0DZV6c9xy7e9GoQioBOXoeR-L6dsrMae
  19. How to pixel tutorials

    Hi there, I don't know if someone of you know this guy (Pedro Medeiro): https://www.patreon.com/saint11 He's creating very nice tutorials how to draw and animate pixel related graphics stuff. Amazing stuff inside! Regards, Christian
  20. I've followed http://melonjs.github.io/tutorial-platformer/#part9 , 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 https://mrengy.github.io/pesky-squirrels/boilerplate-master/ Code at https://github.com/mrengy/pesky-squirrels/tree/4ad5a4863bca515811b277ea7143535f7a1404e2/boilerplate-master Melon JS v3.1.0Mac OS 10.11.3Chrome Version 54.0.2840.98 (64-bit)
  21. Hello All, I run the site GameFromScratch.com, 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.
  22. Amazing Effects in HTML5/JS

    Hi! I've started a tutorial about how to make HTML5 games great... Part1: http://vempiregame.com/allgemein/this-is-just-html5js-are-you-kidding-me/ tell me what you think... wolfgang...
  23. Hello ! There is a free complete course by Victor Mallet. It is about how to create a basic FPS : https://openclassrooms.com/courses/creez-votre-propre-fps-en-webgl It is in french but with a translator, you may understand : https://translate.google.com/translate?hl=en&sl=fr&tl=en&u=https%3A%2F%2Fopenclassrooms.com%2Fcourses%2Fcreez-votre-propre-fps-en-webgl
  24. 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 github.com/end3r/JavaScript-Game-Controls And the articles are using Phaser-based game Captain Rogers: Battle at Andromeda demo as a case study.