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

Found 105 results

  1. I downloaded 16 lessons to learn WebGL programming of this WebGL tutorial from GitHub, the first four lessons are fine and in the canvas HTML5 element I see what I should see, but in lessons 5 to 13, the canvas is entirely black and I don't see any colorful shape on it. In lesson 14, I only see in the center of the canvas the white text "Loading world...", the canvas in lesson 15 is again entirely black and in the last lesson number 16, I do see in the canvas a moving and turning white shaded box from left to right during few seconds and then it disappears and after that the canvas is entirely black again. According to his/her WebGL tutorial, the canvas in each lesson should show me nice colorful shaded and textured 3D shapes transforming in real time on the canvas, not everything black, but this is not happening for me. Why? I am using the latest version of Google Chrome internet browser. What can possibly cause this? In addition to the 16 lessons, there are also 3 examples, the first two examples are fine, i.e. in the canvas I see what I should see, but in the third example the canvas is entirely black again and I guess that this should not be happening.
  2. Coding Train Tutorial

    Found this and was curious if it-d be Phas3r or not.... unfortunately this doesn't state that it is actually Phas3r... but yeah it is! Anyways posting because there are not that many video tutorials out there
  3. Hi everyone, just wanted to share my tutorial on how to make a simple frogger-style game in Phaser 3 (including some camera shake and fadeout effect) Hope you like it! How to make a game in Phaser 3
  4. This is the last part of the multiplayer tutorial series. We're going to host our game in Heroku so that everyone else can access your game! http://gojasonyang.com/post/phaserMultiplayerGamePart8.html
  5. Hello guys, in this tutorial we implement entering username for players by creating another login phaser state. Tutorial: http://gojasonyang.com/post/phaserMultiplayerGamePart7.html Github: https://github.com/dci05049/Phaser-Multiplayer-Game-Tutorial
  6. In this multiplayer game tutorial series with Node.js server and Phaser client, it goes over room logic, and implementing maximum number of players. http://gojasonyang.com/post/phaserMultiplayerGamePart6.html
  7. List of tutorials: Hello, Playground! - Introduction to Oxygen Playground with Live Experiments services used to learn easly about Oxygen engine Simple entity movement - Introduction to input interactions and prefab instantiation, also nested entities tree Advanced yet easy to use input handling with InputHandler component Simple UI and multiple scenes ---------- Hi! Today i'll start series of tutorials about making games with Oxygen Core game engine. Especially for that series i've created Oxygen Playground and Embeddable Oxygen Live Experiments services to easly create and store tutorials (feel free to play with it :D). What is Oxygen Ecosystem? It's a bunch of tools and services that helps making games with Oxygen Core game engine. What is Oxygen Core? It's an ECS (Entity-Component-System) game engine based on concept that your scene is a tree of actors (entities) that may have some behaviour (component) that will make him HIM (think of it as: entity is naked and stupid until you attach some components to it). It's goal is to focus on very rapid prototyping so making games with it is fast. You can check it out on Github: https://github.com/PsichiX/Oxygen (it's a NPM module used with webpack or any other bundler, but minified script bundle is also possible to use). Anyway, I want to stop talking about engine all tech stuff and reveal them one by one in every tutorial. Okey, so first i'll show you what you'll have learn today: Playground project: http://oxygen.experiments.psichix.io/p/BkbVmOdNz Live experiment: http://oxygen.experiments.psichix.io/BkbVmOdNz (btw. Is there a way to embed this in post? it's embeddable view of live experiments so works like movies on websites) Launch Playground project and first what you'll see is code editor on the left and live preview with console on the right. Okey, so already opened code file is your index.js file, which is your game entry point. // import engine related stuff to initialize it further. import { lazyInitialization, System, vec4 } from 'oxygen-core'; // import component so we can register it in engine. import SomeController from './SomeController'; // effortlessly initialize Oxygen engine systems. lazyInitialization({ // renderer will use canvas with id 'playground-screen'. render: { screen: 'playground-screen' }, // game data will be stored under 'playground' id. store: { id: 'playground' }, asset: { // in prior to be able to use playground project assets, we have to use it's fetch engine. fetchEngine: PLAYGROUND.fetchEngine, // we don't want to cache any assets fetched into our game. fetchOptions: { cache: 'no-store' } } }); // get instances of already registered engine systems. const { AssetSystem, RenderSystem, EntitySystem } = System.systems; // register component used by animated node (WebGL logo with 'hello' text). // if we do not register this component, game will crash when some node will try to use it. EntitySystem.registerComponent('SomeController', SomeController.factory); // change renderer clear color to dark gray. vec4.set(RenderSystem.clearColor, 0.25, 0.25, 0.25, 1); // here we make kick-start of our game: // - load first JSON asset with game config and list of used assets. // - asynchronously load all assets from config list. // - trigger event that will load and initialize scene from 'game.json' asset // (scenes and prefabs are just JSON files that describes entities tree). AssetSystem.load('json://config.json') .then(configAsset => AssetSystem.loadAll(configAsset.data.assets)) .then(() => System.events.triggerLater( 'change-scene', 'scene://game.json' )); This file, created once is mostly never changed because it's just a bootstrap code to kick-start your game. Next click on application menu (upper left icon before title) and you'll see list of project files. Here you can open editable files or create new and delete old, also download them (but if you want to download whole project just click upper right EXPORT button and zipped project will land on your HDD). If you're curious what the rest of buttons are: RUN reloads live preview to see your changes. SAVE makes sure that your changes aren't lost and SHARE will show you a bunch of links you can use to share your project/changes with other devs (SHARE works only if you previously save project). Okey, so what actually makes our logo and text scaling up and down? It's entity that uses SomeController component and that component makes scaling animation like that: import { Script } from 'oxygen-core'; // create component class that extends engine Script component (extending Script // component is a base logic component so it will save us from writing a lot of code). export default class SomeController extends Script { // propsTypes it's a place that you may want to describe serializable properties. static get propsTypes() { return { speed: 'number' // commonly used types: number, string, any. }; } // this static method will be registered into EntitySystem // and it must return new instance of requested component. static factory() { return new SomeController(); } // it's good practice to initialize all instance properties in constructor. constructor() { super(); this.speed = 1; this._phase = 0; } // onUpdate() is called on every update tick, here you put your component logic. onUpdate(deltaTime) { // get your instance entity. const { entity } = this; // move animation phase by delta time multiplied by animation speed. this._phase += deltaTime * 0.01 * this.speed; // calculate animated scale from animation phase. const v = 1 + 0.5 * Math.sin(this._phase); // apply new scale to entity. // NOTE: in most HTML5 game engines you'll encounter few scenarios: // - different entity types are just extension of base entity/node/actor; // - there are no entities and components - everything is a node; // Oxygen loves separation of entity from it's logic and prefer to make logic // as components/behaviours attached into entity so given logic may be used // by many entity types, not only one. entity.setScale(v, v); } } And the question you may ask right now: ok, but where is our scene tree, if it's not present in any of code above? Let's see! Open files list and click on game.json file to open it in editor. { "name": "root", "components": { "Camera2D": { "zoomOut": 600, "zoomMode": "keep-aspect" }, "Sprite": { "shader": "sprite-transparent.json", "width": 300, "height": 125, "xOffset": 150, "yOffset": 135, "overrideBaseTexture": "logo.png" }, "TextRenderer": { "shader": "text-outline-transparent.json", "font": "verdana.fnt", "halign": "center", "valign": "top", "color": [1, 1, 1, 1], "colorOutline": [0, 0, 0, 1], "text": "Hello, Oxygen!" }, "SomeController": { "speed": 0.1 } } } This is single entity (root) scene tree, those are mostly called "prefabs" because their simplicity makes them good for instancing complex actors on scene, but here we pretend that our logo prefab is just a scene. As you may see above, there is entity named "root" that have 4 components: Camera2D to view our scene (actually to view this entity and it's children, so it's a good practice to keep cameras in root entities), Sprite to render WebGL logo with sprite transparent shader and logo texture, TextRenderer to draw "hello" text from bitmap font with outlined text shader, and SomeController that animates our entity with given speed - as you can see, every component do it's specified job! Generally scene and prefab JSON files are the place to balance your game, and code should be only the place where you put some logic and configure it with properties in scene/prefab asset. Okey, so this is all for the first tutorial - feel free to change some values of components in game.json file and click RUN (or press ctrl+enter) to see what changed And like always: i'll be very thankful for your opinion about what i did good or bad Next tutorial: Simple entity movement
  8. Hi everyone, // If I make grammar mistakes, please excuse me. I'm still not fluent in English ahah I'm a beginner on Phaser, had to have a look into that for my courses. I'm now upgrading a basic tutorial and I want to use a timer (a countdown) in that game but it really doesn't work, it only create a black screen. To do this, I followed this tutorial : https://www.joshmorony.com/how-to-create-an-accurate-timer-for-phaser-games/ I tried other, without success. Some were a bit to hard to understand, others were pretty ugly ! So here is the code I used , can you help me ? : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); // on ajoute un diamant game.load.image('dmd','assets/diamond.png') game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } var player; var platforms; var cursors; var stars; var diamonds; var score = 0; var scoreText; var countdown; function create() { // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms = game.add.group(); // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-100, 510, 'ground'); ledge.body.immovable = true; // The player and its settings player = game.add.sprite(32, game.world.height - 150, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.bounce.y = 0.2; player.body.gravity.y = 350; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); // Finally some stars to collect stars = game.add.group(); // We will enable physics for any star that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 10; i++) { // Create a star inside of the 'stars' group var star = stars.create(i * 70, 0, 'star'); // Let gravity do its thing star.body.gravity.y = 15; // This just gives each star a slightly random bounce value star.body.bounce.y = 0.2 + Math.random() * 0.2; } // On ajoute les diamants diamonds=game.add.group(); diamonds.enableBody=true; // création des diamants dans l'espace de jeu for (var i = 0; i < 3; i++) { var dmd = diamonds.create(i * 70, 0, 'dmd'); dmd.body.gravity.y = 30; dmd.body.bounce.y = 0.1 + Math.random() * 0.2; } countdown.startTime = new Date(); countdown.totalTime = 120; countdown.timeElapsed = 0; countdown.createTimer(); countdown.gameTimer = game.time.events.loop(100, function(){ countdown.updateTimer(); }); // The score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { // Collide the player and the stars (et les diamants du coup) with the platforms game.physics.arcade.collide(stars, platforms); game.physics.arcade.collide(diamonds, platforms); game.physics.arcade.collide(player, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(player, stars, collectStar, null, this); // idem pour les diamants game.physics.arcade.overlap(player, diamonds, collectDiamonds, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { // Removes the star from the screen star.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } function collectDiamonds (player, dmd) { dmd.kill(); score += 50; scoreText.text = 'Score: ' + score; } function createTimer(){ var countdown = this; countdown.timeLabel = countdown.game.add.text(countdown.game.world.centerX, 100, "00:00", {font: "100px Arial", fill: "#fff"}); countdown.timeLabel.anchor.setTo(0.5, 0); countdown.timeLabel.align = 'center'; } function updateTimer (){ var countdown = this; var currentTime = new Date(); var timeDifference = countdown.startTime.getTime() - currentTime.getTime(); //Time elapsed in seconds countdown.timeElapsed = Math.abs(timeDifference / 1000); //Time remaining in seconds var timeRemaining = countdown.timeElapsed; //Convert seconds into minutes and seconds var minutes = Math.floor(countdown.timeElapsed / 60); var seconds = Math.floor(countdown.timeElapsed) - (60 * minutes); //Display minutes, add a 0 to the start if less than 10 var result = (minutes < 10) ? "0" + minutes : minutes; //Display seconds, add a 0 to the start if less than 10 result += (seconds < 10) ? ":0" + seconds : ":" + seconds; countdown.timeLabel.text = result; if(countdown.timeElapsed >= countdown.totalTime){ // On cherche la fin du timer result = "Rate !"; } }
  9. Help with scales?

    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
  10. 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..
  11. 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.
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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 ?
  18. 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.
  19. 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 !!
  20. 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!
  21. 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
  22. 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
  23. 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...
  24. 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
  25. 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.