Jerorx

Tutorial requests

Recommended Posts

I have written a few tutorials in the past, and would be interested in doing so again. But I'm only one among many other people who regularly make tutorials. With that in mind, I thought a "tutorial requests" topic could be a good idea, allowing people to come by and mention what they would be interested in seeing a (Phaser 3) tutorial or small open-source demo about. Similarly, tutorial makers could also drop by and test the waters by proposing tutorials ideas that they have, but aren't sure if there would be significant interest or not.

For example, someone could come and ask for a minimap tutorial (it's an example, I'm aware there is already an official example for that), which could be picked upon by me or some other tutorial maker. I want to stress that this list is destined to anyone who is looking for tutorial ideas, not just me!

To make it more usable, I will update this initial post regularly to display a summary of the requests posted in the topic. I'll also add links to tutorials addressing the demands, marking them as "done", but additional tutorials on a given topic are always welcome and will be added! In particular, if an existing tutorial doesn't fully meet your expectations, feel free to request another one by pointing out what is missing.

I hope this will be valuable for as many people as possible :)

Pending requests:

  • A Phaser 3 version of the cloud platform tutorial, in particular the physics
  • An introductory tutorial on shaders, for example applied to light effects or visual distortions
  • Best practices regarding the proper use and combination of scenes (for menus, game over, ...)
  • Creating save files using localStorage: done, available here.
  • How to make a text-based adventure (like 80 days, Sorcery, the Banner Saga)
  • How to make a grid-based movement system (using keyboard, not click-to-move)
  • Making a game with Phaser and Cordova: done,  check out this tutorial.
  • Making levels for Phaser with Tiled: done, check this out as well as the full series it belongs to.
  • Tutorials on the basics and how to get started with simple projects

 

 

 

Share this post


Link to post
Share on other sites

Hi Jerorx, great thread idea!

I would love to see how other developers work with scenes in Phaser 3. Right now, I am still using them like states in Phaser 2 but I am aware that this is not how it's intended.

For example, how would you switch between a menu and play state with the Phaser 3 scenes? Or how do you re-use a Game Over overlay box (which is always the same) on different levels (which are always different) with scenes?

For small projects I guess it's not as vital. But for bigger projects I assume using scenes exactly as intended is crucial in Phaser 3. And I still have yet to come across a game example that shows me a real game using scenes properly. What do you think?

Share this post


Link to post
Share on other sites
20 hours ago, jamespierce said:

What do you think?

I think it would indeed be welcome, I've seen many people asking for that on Slack. I myself am not as proficient with scenes as I'd like to be. I have added your suggestion to the list in the first post. I'll also start looking into it a bit more seriously and may then write something on it! (If others know about good resources about this, feel free to share them here).

Share this post


Link to post
Share on other sites

Look man! There are people like me that are in need for something as simple as first steps of a baby. We are unaware of Phaser, and the examples are an advanced place to be!

Can you imagine the features of Phaser that would be an easy beginning for beginners?

If the purpose of your tutorials is to share knowledge with others of your advanced level in coding and gaming do so. But there is no need for that. There are examples and the api documentation that can help them.

I have learned by myself javascript, html, css and you know what? It is the easyness of W3SCHOOL and other resources that make it happend. D3.js is not an easy thing but I have learned it. Because there are sources gor beginners. Not for dummies. Neither for developpers. Just for us decent people who like to learn coding by themselves.

I take you from level zero and together we are going to level 10! Can you make something like that?

 

 

Share this post


Link to post
Share on other sites
On 9/6/2018 at 1:02 PM, makis said:

I take you from level zero and together we are going to level 10! Can you make something like that?

Do you mean for example something like this tutorial from Rich? Or something different?

In any case this is a good idea and I'll think about small projects that could lend themselves to that.  Hopefully, others will as well. I'll update the first post.

Share this post


Link to post
Share on other sites

I bought it. Pages foul of the logic of his game! We want something that explains a lot of phaser options. Like the documentation or examples but with comments that we can understand. Html css javascript. I have Learned everything from 3w schools. Because you can learn nearly everything if someone can show It whith simplicity and patience. A lot of books about d3.js. I read them all. But there is no book for phaser. Real book not the joke of Feronato! 

Share this post


Link to post
Share on other sites
On 9/11/2018 at 8:06 PM, makis said:

 Like the documentation or examples but with comments that we can understand

@makisI see. I agree with you that the examples may not always be 100% crystal clear. However, as far as I am concerned, being already relatively experienced with Phaser 3 makes it a bit difficult for me to figure out which ones are the less helpful for beginners. Could you maybe post here a list of the Phaser 3 examples for which you'd like to see more detailed comments and documentation (à la w3schools)? Posting such a list here could have two benefits:

- Some people could make pull requests adding comments to the problematic examples;
- Some people/me could decide to focus on some of them and elaborate them into tutorials/demos

I think you make valid points, but I need more specific targets to help motivate me to get started on new tutorials. ;)

Share this post


Link to post
Share on other sites

Hi my name is Daniel I'm from mexico and this is like my introduction to this forum greetings to all, so i request a tutorial that covers the implementation of a phaser game with cordova, i have some experience with cordova but i have failed on the attempt of making a cordova app with phaser I'm really new to phaser so i would like like a beginners guide to cordova and phaser 3 

Share this post


Link to post
Share on other sites
12 hours ago, Danielpok said:

Hi my name is Daniel I'm from mexico and this is like my introduction to this forum greetings to all, so i request a tutorial that covers the implementation of a phaser game with cordova, i have some experience with cordova but i have failed on the attempt of making a cordova app with phaser I'm really new to phaser so i would like like a beginners guide to cordova and phaser 3 

@Danielpok Hi Daniel I've recently written a tutorial about how to create an Android app, and publish on the PlayStore, with Phaser and Cordova: http://browsergameshub.com/create-android-game-cordova/

It shows step by step how you can follow along the Cordova doc and make it work. It was confusing for me at first also, so I decided to take notes while I was going through the process and write it up in a blog post. Hope it helps...

Share this post


Link to post
Share on other sites
13 hours ago, jamespierce said:

@Danielpok Hi Daniel I've recently written a tutorial about how to create an Android app, and publish on the PlayStore, with Phaser and Cordova: http://browsergameshub.com/create-android-game-cordova/

It shows step by step how you can follow along the Cordova doc and make it work. It was confusing for me at first also, so I decided to take notes while I was going through the process and write it up in a blog post. Hope it helps...

Thanks man for the time on answering me, i was really frustrated, so i started to play around with cordova an phaser and finally i got results, i was so nervous on messing arround with the autogenerated files that cordova makes when "$ cordova create", but i finally get my game running!!
I just take my basics on my past cordova developed apps i think i only need to remember how cordova works, but thanks for the consideration, i was thinking to make a cordova tutorial for those who uses linux , im an advance linux user with more tha 6 years of Debian being my main OS so i can make a tutorial on how to get started on LINUX+CORDOVA if someone request it.

Share this post


Link to post
Share on other sites
2 hours ago, jamespierce said:

If you mean "click to move" in a grid-based world, I've written a tutorial about how to do that using the A* algorithm:

A* Pathfinding in JavaScript for HTML5 Games (With Phaser 3)

Not necessarily click to move or pathfinding, but maybe I can get that to apply to simple movement... effectively, I just want player movements to be constrained to a grid. :D

that is, I'd like the cursors (whether they be buttons on a screen for mobile or WASD/arrows on desktop) to control the movement, not necessarily using AI

Share this post


Link to post
Share on other sites
13 minutes ago, Splashsky said:

Not necessarily click to move or pathfinding, but maybe I can get that to apply to simple movement... effectively, I just want player movements to be constrained to a grid. :D

In that case you can use the standard keyboard inputs but don't allow diagonal movement.

Then on top of it, you only allow changing directions when it perfectly matches the grid, such as (same concept for y-coordinates):

function allowChangeDirection()
{
    if(player.x % tile_size === 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Now the problem with this will be that if your tile_size is not divisible for the player's speed, then the check will never return true. To fix this, you can increase the range that you check by the speed / velocity value:

function allowChangeDirection()
{
    if(player.x % tile_size <= player.speed)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Then when you finally change direction on the grid, round the player's coordinates to fit perfectly onto the grid. Else over time your player might end up a bit off the grid.

if(allowChangeDirection())
{
    player.setPos(
        Math.round(player.x / tile_size),
        Math.round(player.y / tile_size)
    );
}

This is just a general approach but you can play around with it and tweak the values for the checks & player coords which feel best for your particular game.

Share this post


Link to post
Share on other sites

I'm late to this party but I cannot find a satisfying tutorial for building levels through tiled for a platformer with Phaser 3. Or at least I cannot find the best method or practice to do it. 
Would oyu be open to a tutorial covering that?

Share this post


Link to post
Share on other sites
7 hours ago, mhcdotcom said:

I'm late to this party but I cannot find a satisfying tutorial for building levels through tiled for a platformer with Phaser 3.

Check out the tutorial series by the man who helped develop the tilemap system in Phaser 3, it's very good. In the second part of the series he is using a platformer as an example:

Part 2
https://itnext.io/modular-game-worlds-in-phaser-3-tilemaps-2-dynamic-platformer-3d68e73d494a

I still think you should go through the whole series, though!

Share this post


Link to post
Share on other sites

I have updated the first post with the latest requests as well as with the links @jamespierce has provided! Sorry for delay in doing so, I hadn't noticed that the topic had been moved and pinned and had thus gained a bit in popularity! I'll check more diligently from now on.

I have also added a link to a small demo and tutorial I made addressing @B3L7's request about localStorage.

@kudefe, I have summarized your request as "text-based adventures", let me know if you think it's not accurate!

Share this post


Link to post
Share on other sites

I desperately want a tutorial on shaders, I think that a lighting effect would be good for a scene in my game, and a distortion effect to simulate drunkenness would be good as well. But I have 0 expeience with shaders and I can't tell when a shader is a single 3D object or when it's a filter for a 2D plane!

I think some point before the end of the year I'll do a tutorial about how to create a text-based game using Ink and Inkjs, as that's what I'm currently using for my game at the moment. It's pretty powerful and used a lot in Unity games at the moment. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.