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. Tutorial: Making Minesweeper (Preview of what we'll be making) Introduction to MineSweeper (Image 1. The classic Minesweeper. You can play a version of it online at http://minesweeperonline.com ) Minesweeper is a classic game, which just about everyone who’s ever had a computer has played before. It’s a sometimes frustrating puzzle game, that mixes a bit of luck with a head for numbers. It’s a simple design that can challenge the player again and again no matter how many times they play it. Basic Design Before we can get into writing any code, let’s take a look at the design of the classic Minesweeper. There will be three basic game objects: A square, the playing field that contains all the squares, and the ‘Smiley’ faced button. The basic gameplay is the player has to uncover the whole field, except for the mines. He can place a flag on top of mines by right-clicking to avoid clicking on them. If he accidentally clicks on a mine, it blows up, and he loses the game. If he manages to clear all the squares without clicking on a single mine, then he wins. Each object will have the following behaviors: Game Objects Table 1.1 Square Playing Field Smiley Face Could be a bomb Could be next to a bomb. If it is, then the square has a number. Flags can be placed on top of squares. Is a list of Square objects. These squares need to be created in the room, and the bomb needs to be randomly placed. If all the non-Bomb squares are cleared, then the player wins. Looks anxious when the player presses a square. Looks dead when the player presses a bomb square. Looks cool when the game is won. Tools Panda2 Link: https://www.panda2.io/ Panda2 is a visual way of writing HTML5 Javascript games. It allows you to immediately see the code changes you're doing onscreen. It's built on the Panda Engine, which is an opensource html5 engine. ImageEditor Any image editor for creating png’s to use for the game’s graphics. But don’t worry, the game resources are included with the source code so you can get coding without spending time trying to create game resources. Step 1: Setting up the Base So you’re ready to make the latest, and greatest MineSweeper game. Great! But how will we start? In Panda2, create a new project. (Image 2. A blank project). The first screen we’re presented with the base game setup: This is where the core ‘engine’ is loaded for the game. You can see first it’s loading the engine, then the config, before it starts main.js. We don’t need to worry about the engine, so first let’s add some graphics we can use in the game. Click on the asset tab, and then add graphics: (Figure x. Adding assets to the game). Go to where your game graphics are stored, and selecte the Square graphic to load. (Figure 1.x the assets for this game) Click on ‘Main’ in the sidebar. You’ll be presented with your ‘game logic’. (Figure 2. Main.js. This is going to be the starting point of your game). Click on line 12, to get your cursor there, then press the (+) button, which is indicated by the red arrow in Figure 2. It’ll create some code for new, a new Class. Go ahead and call it ‘Square’. After creating the Square, now we have to add the sprite for it. Click again on the asset tab, hold down Alt and click on the ‘square.png’ image. You should now see the following code added to your game: game.addAsset('square.png'); Make sure this code is just above your ‘Main’ definition. Now: Inside Square, change the init function to this: init: function(x, y) { this.mySprite = new game.Sprite('square.png'); this.mySprite.position.set(x,y); this.mySprite.addTo(game.scene.stage); } And inside of Main.init(), add the following line of code: var playingField= new game.Square(96,96); All together, it should look something like this: game.module( 'game.main' ) .body(function() { game.addAsset('square.png'); //press alt+click on square to add it to game. game.createScene('Main', { init: function() { var playingField= new game.Square(96,96); } }); game.createClass('Square', { init: function(x, y) { this.mySprite = new game.Sprite('square.png'); this.mySprite.position.set(x,y); this.mySprite.addTo(game.scene.stage); } }); }); Save and refresh. (the red arrow in Image below points to the Refresh game button) Congratulations! You’ve created the first step of the game. You’ve used Panda to add a new Asset to your game. You’ve created your first game object, and you’ve created your first sprite to draw into the game. What we’ve created so far can be found in the minesweeper_01 project in the source code. Now: While what we’ve achieved is not that impressive, we’re getting familiar with the workflow of adding game resources like images, and creating new gameobjects. Now that we’re familiar with this, we’ll now be able to quickly create new objects and display them however we please. Other resources, like music and sound are added in much the same way. Next up: We want to create a playing field. And we want to add some game function to the Squares (Like Bombs!). Step 2: Creating the Playing Field and adding interactivity. In this step, we’ll create the actual playing field of squares, we’ll turn some of the playing fields into bombs, and we’ll let the Player click/tap on the squares to reveal them. We need to add more assets to the game. This includes loading 2 font resources: Fonts have 2 files associated with 2 files: *.fnt file, and a *.png file. Load the extra assets into the game. Add a PlayingField game object. Add Bombs and code for checking for bomb. Our game now looks like this: It’s getting there! Squares now know if there’s a bomb next to it, or if it’s a bomb. Square are also randomly assigned a bomb. The full code for where we’ve gotten to so far can be found in the minesweeper_02 project files. Step 3: Implement basic game logic. In this step, we code the game to have win/lose logic. We add some of the classic Minesweeper features, such as marking squares with flags, and adding a ‘Smiley’ face to the GUI The game now looks like: Full source code can be found in minesweeper_03 project files. Step 4: Adding some final polish. Final code polish. Flagging mines on game complete. Exploded sprite. Adding Animation. Game now looks like: Full source code is in minesweeper_04 project files. Final Step: You! The next step is to take this game to the next level. Here’s some suggestions: Traditional Minesweeper is a fixed grid. Add some level design! Change the pattern. There’s no reason to even keep it to be squares. Use hexagons, or circles. Put it in space! Polish the game! Add Music and sound effects. Add a Title screen. Add some cool explosion animations if the player clicks on a bomb. Make stars fly out when the player wins. One thing that players of the traditional minesweeper do is play for the hi-score. Add a timer and track their scores. Let them share their scores on Social Media Release it! The Panda2 editor has some features to easily export and release your game across multiple platforms. Some of the platforms it currently supports are Android, iOS, Facebook Instant Games, AndroidTV, XBoxOne. Source Downloads: minesweeper_01.zip minesweeper_02.zip minesweeper_03.zip minesweeper_04.zip And Finally... Leave some feedback. Cheers!
  2. Back to the Lamps on Babylon / Open Contest! forum thread, I've commited myself to write a tutorial about my lightmap workflow. Here the demo: And here the first published version of the tutorial... but in french, for now 😄 https://www.nothing-is-3d.com/article25/de-blender-vers-babylonjs I will soon make available an english version, don't worry. [edit] english version is out: https://www.nothing-is-3d.com/article27/from-blender-to-babylonjs
  3. 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?
  4. makis

    Any reason to use phaser...

    Since GODOT does everything that Phaser does but with greater facilitaton as well as more quickly and with great easiness and much much less effort blood and tears. Why to use phaser any more?
  5. Pretty good engine I think!
  6. makis

    Please help!

    I recently read a poor guy’s sos cry! You can read it here! Hello everybody, I had some questions about getting started with phaser that might sound very stupid, but I am just getting started and I'm not sure what I'm doing. I followed the step for step installation guide but the hello world test is still not working. Please keep in mind that I'm a complete newbie, the setting up of a local server already confused me and I decided not to get into any github command line busy because the more I looked into that and tutorials about it, the scarier it got. So what I have now is brackets as my code editor, and wamp as my local server. The wamp symbol is green, so it's working. I downloaded Phaser as a JS. file, but I'm not sure where I'm supposed to put it? Does it work anywhere on my computer, should it be in the WWW folder? The step by step guide does not tell me this. I also copy and pasted their hello world code into an HTML file, placed it inside of a folder in the WWW folder, but when I go to localhost and open up the project, it does nothing. I'm at a loss. Please help me out, because I am very confused. HERE IS MY ANSWER! Stay away from that beast! You just loose time, mind, even money. Supposed you have everything fully working and reading the tutorial still you have nothing. They don't have resources to guide you towards your travel. They don’t want It. They don't allow you to have knowledge on Phaser. They feel as masters of the universe. Just leave this effort to learn Phaser beast. I am here having lost time mind money with nothing in return!
  7. makis

    Needing some tutorial!

    <script> this.input.keybord_F_key(‘isdown’,go); function go(){ this.add.anims({ targets: rocket, rocketPosition: { t:1, rocket.x: path.get.point.x, rocket.y:path.get.point.y, duration: 500 } }) } this.setColide(rocket, planet, blowUp); function blowUp(){ this.add.anims({ targets: planet, frames: {begins:1,ends:6}, frameRate: 20 }) } </script> I have to say that beeing a newbie on Phaser, I dont know if it is the right tool for little fun animations. If so can I have some help, please. Or, have you any idea for a different tool for projects like that? I know many things about html, css, javascript, d3.js, gsap.js, jquery.js. I have a tilesheet that begins with a planet and ends with the explosion of the planet. I have the rocket. When I push the F (fire) key it moves on path and destroys the planet. It explodes on it! Can I have any help in order to speak Phasers 3 language so I can give flesh and bones to my project? You have to keep in minde the unfortunate scarcity of Phaser 3 tutorials that could help people, thirsty for coding, like us. Again if you know some other tool for little animations, can you tell me what is that? I would be grateful if you do ...
  8. Hi there! I've created a detailed tutorial on how to create a full cross-platforms WebGL game (using Babylon.js of course) from mobile touch devices, to desktop up to VR! https://www.davrous.com/2018/08/14/using-webgl-and-pwa-to-build-an-adaptative-game-for-touch-mouse-and-vr-devices/ I've tried to create small samples for each section often pointing to the playground to explain you how to do each part. I hope it will help people discovering some Babylon.js principles and will also generate some forks to create other fun 3d experiences! At last, I'm explaining how to manage properly offline via a Service Worker coming from PWA coupled with our embedded IndexedDB layer. As a bonus, you'll discover how to push your game to the Microsoft Store Hope you'll like it! Cheers, David
  9. Hi I have just created a beginner's course on babylonJs on udemy named "Single & Multiplayer Game Development in Webgl's BabylonJs" I took permission from @Deltakosh to post the link on the forums Here you go ! https://www.udemy.com/single-multiplayer-game-development-in-webgls-babylonjs/?couponCode=BONUS10 Any comments are much appreciated, Thanks ! Ahmed
  10. 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.
  11. AdamRyanGameDev

    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
  12. 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
  13. 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..
  14. 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:) )
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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 !"; } }
  20. 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
  21. estudillod

    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
  22. Jadegames

    [GameMaker Tutorial] Simple 3D Dungeon

    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. http://store.steampowered.com/app/495720/ 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.
  23. 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
  24. PlayingInCanvas

    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
  25. PlayingInCanvas

    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.