• Content Count

  • Joined

  • Last visited

About zeke_chan

  • Rank

Recent Profile Visitors

890 profile views
  1. zeke_chan

    WeChat Mini Game WIP

    It's my first WeChat mini game project and I thought I would just like to share it here. So far I've completed basic gameplay and finally figured out how to use audio (since Phaser audio does not work on the platform). Pretty exciting to see things progressing and being able to test it on my phone 😀 Only thing that's left is the sharing/viral feature and leaderboard. You can watch the WIP video here.
  2. Thanks for sharing the link =)
  3. zeke_chan

    [solved] Arcade Collision not working

    Hi, it would be helpful if you zipped up your files and share it here. Or you could just send me a PM. Or you could upload your files somewhere to test out online. Zeke
  4. zeke_chan

    Scope of an object in a different function

    Could you upload your full code somewhere to see? Hard to tell from this few lines. Here's what I'll assume: you are calling the nextPage function from another function called click (for example). If that's the case, your this keyword in the nextPage function no longer refers to the same this keyword in the create function. Are you using a global game variable? Meaning you declared it like so: var game = new Phaser.Game... If that's the case, try changing all the this.game to game in the create and nextPage functions. Not sure if that helps, if it doesn't, you have to share your source code to help you further.
  5. Hi symof, Try this out: function lookAtObject(obj, target, rotspeed){ var angle = Math.atan2(target.body.y - obj.body.y, target.body.x - obj.body.x); var da = angle - obj.body.rotation; if (da > Math.PI) { da -= game.math.PI2; } else if (da < -Math.PI) { da += game.math.PI2; } result = (angle - obj.body.rotation) + " : " + da; if (da < 0){ obj.body.rotation -= rotspeed; } else { obj.body.rotation += rotspeed; } if (obj.body.rotation > Math.PI) { obj.body.rotation -= game.math.PI2; } else if (obj.body.rotation < -Math.PI) { obj.body.rotation += game.math.PI2; } } Here's the explanation. At line 3: var da = angle - obj.body.rotation; We're getting the difference between the angle of the mouse compared to the target and the target's current rotation. If you were to output the result of da right after line 3, you would get a value of -4 or +4 when you attempt to rotate more than 180 degrees. This happens especially when you cross the 180 degree rotation point that turns into -180 degrees. As a result you get the values constantly jumping between a positive and negative value. I'm guessing you would already know this. The value of PI is 3.14159265359 and this represents 180 degrees. The top half goes from 0 to -180 degrees while the bottom goes from 0 to 180 degrees like so: If the difference in angle happens to be more than 180 degrees or more than the value of PI, your sprite ends up rotating in the wrong direction. That's currently happening with your code. That's where this part comes in: if (da > Math.PI) { da -= game.math.PI2; } else if (da < -Math.PI) { da += game.math.PI2; } The first if checks for counter clockwise movement. The else if checks for clockwise movement. Let's look at the da < -Math.PI condition. Before you cross the 180 degree line: When you cross the 180 degree line: The arrow indicates the direction your sprite rotates in. Which is not what we want. To correct it we need to offset the result of da by 360 degrees. That's where the da += game.math.PI2 or da -= game.math.PI2 part comes in. The result looks like this now: Make sense?? Okay, the last part here: if (obj.body.rotation > Math.PI) { obj.body.rotation -= game.math.PI2; } else if (obj.body.rotation < -Math.PI) { obj.body.rotation += game.math.PI2; } This part is crucial. Missing it out would make your sprite rotate correctly only for one 360 degree turn. You can try leaving it out and rotate more than 2 turns and you'll see what I mean. To keep the values and calculations correct, we need to ensure that when the sprite crosses the 180 degree line, we need to reset it back to its correct value. Using the attached image example above, let's say the sprite has rotated towards the mouse cursor. Assume the value of obj.body.rotation = 4. We need to correct that value so it doesn't keep adding up if the sprite continues rotating clockwise. Looking at the code above, the correction is the same as what we did for the da variable. Now you sprite can rotate as much as it wants without causing any problems. Let me know if you need further clarification.
  6. I would focus more on JavaScript programming using the the Phaser framework.
  7. I've been playing with this idea of creating an online course to help beginners learn HTML5 and Javascript. It seems to me there's a lot of frustration and struggle when it comes to actually making a complete game. Not just a demo showing some features like a double jump, making enemies move in a certain way or showcasing different weapons, but a complete game that is worthy of publishing. Since it's beginner friendly, you won't need any background in design or programming or anything. The course will cover topics like coming up with good ideas, designing your own graphics and learning to code. Making a game is like putting together a jigsaw puzzle and just like a jigsaw puzzle, the only way to figure out where the pieces go is have the entire big picture of what the finished puzzle looks like. Correct me if I'm wrong, but if you're a beginner, that's probably what you struggle with most... to have a big picture of what they're going to make and see exactly how each piece fits together. Also, what if you could choose the puzzle and picture you want to work on? What if you could decide how you want your final game to be like so you end up making a unique game, different from the rest in the course? I don't want to create just another make a "Mario platformer", "Asteroids" or "Match-3 Candy Crush" style game. To help you along, there will be videos, written tutorials, tonnes of code snippets to look at, and personal support from me so you can ask up to 3000 questions a month (that's 100 questions a day!). Just kidding about the limit =) You can basically ask any number questions 24/7 and I'll personally reply each one. The course will be limited to 30... maybe a maximum of 50 people so you get personal attention. I'm thinking of launching this sometime in the next quarter (July-Sept)? The goal is to learn how to make your own game and to finally publish it for the world to play. Who's interested? If you have topics you'd like to see, feel free to suggest and if it's a good fit for the course, I'll figure out how to work it in. If you're keen, leave a reply below. More details to come =)
  8. zeke_chan

    Beginning JavasScript/HTML5 Gaming Class

    Hi there. I teach game development at the university level but in terms of experience and knowledge, most of my students come in with zero programming background. How long will your course run? If your students have little JavaScript experience, I would suggest Codecademy to get started: https://www.codecademy.com/learn/javascript Here are games your students could start with (this is what I teach my gamedev 101 class): Endless running style game (like flappy bird) Pong Asteroids Once those are done, you could progress with: Breakout Space invaders Minesweeper Tetris If you plan on introducing game AI: Rock paper scissors Tic-tac-toe Battleship Feel free to reach out if you'd like more suggestions or help in planning for your course. Also, I've been writing game tutorial series that you may find useful for your class. You can check it out here: zekechan.net. Zeke
  9. zeke_chan

    Scrolling script killing my eyes...

    Could you post a link to see how it looks like?
  10. zeke_chan

    [Tutorial] Asteroids remake with Phaser

    I've just published part 4 of this tutorial. The link has been added above =)
  11. zeke_chan

    [Tutorial] Asteroids remake with Phaser

    [uPDATE: 13 November] Part 4 of this series has been published. You can find it here: http://www.zekechan.net/asteroids-html5-game-tutorial-4/ ---------------------------------------------- Hey everyone, I've been writing a new tutorial series on recreating the classic Asteroids with Phaser. Tutorial Outline The steps for this series includes: 1. Project setup 2. Player ship 3. Creating a single screen game world 4. Adding asteroids 5. Adding player lives 6. Adding sounds 7. The main menu state Links to tutorial http://www.zekechan.net/asteroids-html5-game-tutorial-1/ http://www.zekechan.net/asteroids-html5-game-tutorial-2/ http://www.zekechan.net/asteroids-html5-game-tutorial-3/ I will be posting updates every Friday so either check back or subscribe to my newsletter. Let me know if you find this helpful and of value. Also, if you spot any errors or parts that are unclear, do let know so I can improve =)
  12. Hi everyone, I just wrote a tutorial on how to remake the classic Pong game in HTML5 and Phaser. It's composed of 7-parts and I try to go as in-depth as possible to explain every single line of code I use. Tutorial Outline Project Setup Loading Assets & Adding Sprites Moving the Ball Adding the Game Mode Moving the Paddles & Adding Collisions Scoring and Resetting Adding Sounds and Wrapping Up Link to tutorial http://www.zekechan.net/getting-started-html5-game-development-pong1/ Source files https://github.com/zekechan/phaser-html5-tutorial-pong I'm also planning to write similar game tutorials on other classic games like: Breakout Space invaders Asteroids If you enjoy the tutorial and would like more I would love to hear your thoughts. Feel free to reply, send me a message, leave a comment on my blog =)
  13. Hi everyone. I'm Zeke from Malaysia and I've teaching game development at the Asia Pacific University the past 5 years. I'm thinking of starting a series of HTML5 game tutorials for beginners by deconstructing retro/2d games. It would be a sort of break down analysis of what makes a game fun (talking about game design & mechanics) and how to build a similar game while adding in new ideas. The purpose is to demonstrate how to take the ideas you have in your mind, flesh out the details then turn it into a full game. I'm curious to know if this is something you would be interested in? If yes, what sort of games would you like to learn how to make? Here's my starting list of games. Pong Breakout Space invaders Doodle jump Asteroids Also, what format works best for you, text with images or video? Thanks =)
  14. zeke_chan

    Game development blog

    Hi everyone, I'm Zeke from Malaysia. I've been teaching game development and programming at the Asia Pacific University for over 4 years now and have recently started a blog to share publicly some of the things that I teach my students. So far I've written 2 articles: 1) Making your first video game 2) The ultimate goal as a game developer My intention for the blog is to be a resource for my students and I figured perhaps it could benefit the community here as well. Have a read and let me know what you think. Thanks. Zeke