Search the Community

Showing results for tags 'Learning'.



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 8 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. https://pryme8.github.io/NeatFlax/ Just got this up to start putting a central link for all my tutorials... Anyone else want to submit some and we can host it here and add it to the directory? Just post a link of a tutorial you own the rights to Ill review it and post it for you with credits on neatFlax ha i love that name. Im not done with it yet, but https://pryme8.github.io/NeatFlax/webWork/ is gonna be one of the first ones on there, then ill move my noise tutorial over as well and start compiling some of my other lessons. *EDIT* Ohh yeah guidelines! Pretty much anything that will benefit game design, a lot will be targeted to BJS. Playgrounds are submit-able, but please have an accompanying write up with incremental playground links showing the steps. A 500x500 pxl 96dpi showcase image.
  3. I wrote an article titled You already know Flash, so JavaScript is easy. One important thing I missed was how easy it is to animate things in Flash compared to JS. So might have to share what I learned there later. I'm wondering what else did I miss. I need feedback, what would you say to convert Flash developers to HTML5?
  4. Hello, everyone I am presenting a project which will be a good contender to immersive navigation environment, but the immediate goal is a mindmapping tool. Programmers skilled in 3d, dataminning, integrating big data, and others will be essencial to the development. A challenge is here for programmers who dwell in visual thinking and make use of mindmaps and would like to improve them. A challenge to build a 3d environment for mindmaping, with stunning compartmentalization and interaction, recursiveness, big data integration, and enhanced visualization. I have a couple of ideas on how to proceed for a good base, and a couple of interconnected mindmaps I would gladly beta test on, and I'm sure if we share to the mindmaping community, new ideas and concepts will emerge to better a product that will be, ultimatelly, a dynamic tool for all sorts of navigation and interaction with data. V2.0 will include a separate class which retrieves and catalogues your browser favorites, retrieves the tags from each, and draws the relations inspired by what was achieved here http://www.bestiario.org/research/videosphere/, then creating an interactive representation. But that's for later... I am a private individual, I don't have commercial interests in this endeavour, and am willing to share the ideas with people interested, and with the ability to do it, so I can see it come true. I initially posted this before reading the guidelines, for which I apologize.
  5. Hi friends, i'm new with Phaser and i did a simple game to study and learn it. The idea isn't original and the game are in development, remember, i did it only to study and learn how to use and program Phaser. You can play it here, use space to jump, its simple. Debbug mode. Normal mode. One las thing, hope you guys like it and don't hate me because my english are so bad! Any news i'll update this post, see you guys.
  6. Hey Enpu, I write here just to say that this is one of the few times in my life in which there's something that I like A LOT, but there's still very few material about it. Don't misunderstand me, I'm not flaming nor trying to bring you down nor whatever. Just saying that I'm liking Panda.js a LOT. But the demos aren't enough material to make game of different disciplines. There's no material on Internet about Panda.js other than the official site, which gives specific examples, and the API reference. I mean, I want to make a platformer. Kind of a Megaman. But I don't know how to use spritesheet animations, collisions, enemies, etc. I come from GameMaker which has all that already chewed. GameMaker gives you editor for sprites and whatever, gives you GML for scripting which is not SO bad as a language but I wanted even more control over my game. Over code, to be precise, GML has weaknesses, it's not really OOP, data manipulation is not so flexible, etc. Then Javascript is an awesome choice. Your framework looks so versatile, full of features, prollific, etc. but I'm having HARD times trying to do things! Very few things are, let's say "deductible" from your code (which is, thanks God, very read-friendly) but many other ones I just can't guess :S I swear to God that I'd never write this kind of message before googling at least half Internet, so you can give an idea... It would be nice to have tutorials on how to make a platformer, a shooter, a maze, puzzle, networked multiplayer games, etc. I know it's gonna mean a ton of work from you but well, I can't see other way to learn than tutorials from the very creator of this software. Greetings again, Leo. P.S.: I say again, this message is not to be taken as a complain. I just want this engine to trascend, otherwise I wouldn't bother in writing such a letter
  7. Number Garden Arithmetic bugs from the forest of Lost algebra have taken over the park. Are you smart enough to help Lime and Minet the cat to stand against the neverending wave of maths bugs? Challenge yourself, learn maths and have fun. add them up in your head, no calculators, GO! Download the game from hereMore information about the game here Hi everybody!This is our first post here on the forum even if we have been lurking from a few months ago.We have just released our first game and we want to share it with you.Working with Phaser was a great pleasure: the documentation, the examples and the community support are just amazing! We created a game to help children (elementary - middle school) exercising their math skill while having fun. Nonetheless, we've heard that many adults are getting hooked up too. This is our first game ever so any feedback or comment is welcome. Thank your for your time
  8. An exciting stealth mobile game startup is looking for a highly talented game/app engineer to work out of our brand new Mountain View office. The successful candidate will be working on an exciting narrative-themed next gen learning product--with the goal to revolutionize education. The ability to work quickly and efficiently as part of a high octane startup team and kick butt under pressure is crucial. We are looking for an experienced mobile game/app developer to join our brand new learning games studio as a founding team member--with the opportunity to lead our mobile initiative across multiple platforms. Based in the exciting startup scene of Castro Street in Mountain View, we’re offering: Competitive salary and a comprehensive benefits package Fun, passionate and creative studio on a mission to revolutionize education Challenging and rewarding work on the frontier of cross-platform HTML 5 game development QUALIFICATIONS Expertise in HTML 5, CSS3, and JavaScript is essential Experience working with javascript libraries like jQuery, Pixi, CreateJS, or similar. Experience with mobile game dev across multiple platforms, including Android and iOS (phones, tablets, and browser) Ability to develop dynamic, compelling gamified user experiences in mobile (that kids will absolutely love) Ability to ramp up quickly on new mobile languages Commercial mobile game dev experience with multiple titles shipped Bachelor’s degree in Computer Science, related discipline, or equivalent experience KEY RESPONSIBILITIES Act as the primary interface with mobile dev team from a technical perspective driving the delivery of compelling mobile game experiences Maintain robust code quality across multiple mobile game dev environments Bring passion, energy, and commitment to professional quality cross-platform mobile development REQUIREMENTS Awesome communication, collaboration, and management skills Strong coding, problem-solving, and debugging skills Passion for mobile games and an interest is disrupting education!