Ellis Herbert

Ellis Herbert

1574311008

Moving Between Screens in Your Game Using MelonJS

MelonJS is a very powerful and versatile 2D HTML Game Engine and although its documentation is quite extensive, there is a lack of explained examples when it comes to developing a game.

Screen vs Game State

One distinction to make before moving forward is that of screens vs game states. This is mainly because both concepts can get confused with each other given the right circumstances.

A Game State can be defined for when you need to have extra control over the current status of your game. In other words, it could very well be another screen or it could be something like a pause screen, a main menu, an end credits screen or anything non-playable. In such cases, you’re able to control the game by providing a handler object for this new state (i.e removing characters from the screen, playing different background music, you get the point).

You’d usually define all possible game states as part of your loaded method inside the game entity.

// set the "Play/Ingame" Screen Object
me.state.set(me.state.PLAY, new game.PlayScreen());
me.state.set(me.state.MENU, new game.TitleScreen());
me.state.set(me.state.GAME_END, new game.EndTitleScreen());

game-states.js

The above three lines configure all possible states the game can have, and which ones are the handlers for each. You can later load a particular state with a line such as:

me.state.change(me.state.MENU);

Out of the box, melonJS provides 9 different game states you can use (CREDITS, GAME_END, GAMEOVER, LOADING, PLAY, READY, MENU, SCORE and SETTINGS). That being said, there is also a tenth state called USER, which can be used to define user-created states (after all, you can’t expect the creators of melonJS to predict all possible states you’ll need for your game). So you could easily create more valid constants which you can later register like above. And these constants are created like this:

const STATE_INFO = me.state.USER + 0;
const STATE_WARN = me.state.USER + 1;
const STATE_ERROR = me.state.USER + 2;
const STATE_CUTSCENE = me.state.USER + 3;

new-states.js

On the other hand, screens can be thought of as new playable levels. Changing between screens implies that the game continues in the same state (playable) only with a different level loaded. Mind you, you can potentially achieve the same effect using game states, but that would be somewhat of an overkill, and you’ll see why in a minute.

What’s in a level?

But before we delve into the details, what do you need to add to a level to make it work? This actually depends on your approach towards game design with melonJS, after all, you can load all entities using code or, you can take advantage of the amazing integration between Tiled and melonJS and create the entities right there on the map.

Because I’m lazy and I really like to visualize where everything is for a level instead of using my imagination and a lot of trial and error with hand-coded coordinates I prefer the second option.

With that being said, the bare minimum I need to add into a level to make it work is:

  • A layer for collisions (with all the objects defining the collision map)
  • A layer for the terrain (that can be an image layer, a tile layer or whatever you think you need)
  • An object layer where you can add a single object for your main player.

With that, you have a playable level, it’s probably a very boring one by itself, but it works.

Collisions work out of the box as long as your layer’s name starts with that word (amazing use of convention over configuration if you ask me). Any shape you add to this layer (which of course, should be an object layer) is assigned a collisionType of WORLD_SHAPE automatically. You can see how the platformer example reacts to the type on the player’s onCollision code:

 onCollision : function (response, other) {
        //console.log("Colliding with: ", other.body.collisionType)
        //onsole.log(me.collision.types)
        switch (other.body.collisionType) {
            case me.collision.types.WORLD_SHAPE:
                this.standing = true
                // Simulate a platform object
                if (other.type === "platform") {
                    if (this.body.falling &&
                        //!me.input.isKeyPressed("down") &&
                        // Shortest overlap would move the player upward
                        (response.overlapV.y > 0) &&
                        // The velocity is reasonably fast enough to have penetrated to the overlap depth
                        (~~this.body.vel.y >= ~~response.overlapV.y)
                    ) {
                        // Disable collision on the x axis
                        response.overlapV.x = 0;
                        // Repond to the platform (it is solid)
                        return true;
                    }
                    // Do not respond to the platform (pass through)
                    return false;
                }

                // Custom collision response for slopes
                else if (other.type === "slope") {
                    // Always adjust the collision response upward
                    response.overlapV.y = Math.abs(response.overlap);
                    response.overlapV.x = 0;

                    // Respond to the slope (it is solid)
                    return true;
                }
                break;

       //....
        }
 }

on-collision-example.js

You can even set the shape’s type to “slope” if you want the player to be able to run up those inclined angled shapes.

This is image title

Notice the triangular shape I added on the above image. The type set to “slope” is what will allow the player to run up that surface, otherwise it will act as a vertical wall.

The terrain can be either a tile layer, which means you will use your tileset to generate the terrain your player will move on, or you can simply use an image layer. The point here is that since your collision map is defined in another layer, this is merely visual and can be anything you like.

The player is represented in this map as a simple shape (ideally a rectangle) located right where the player is supposed to start the level. The dimensions of the rectangle here are actually important, since they will represent the size of the hitbox (the one used to calculate collisions).

The other key point about this object, is that its name (the name attribute in Tiled) needs to match the name you used to register the entity in your code.

With that being said, let’s now take a quick look at how to switch between levels using Tiled directly.

Switching between levels

Now that we understand how to create levels and what to add into them, the only part left is to understand what you need to add in order to make it switch between levels.

And it’s actually super simple: the magic happens when you add a shape called me.LevelEntity . Essentially this is a pre-defined entity that the engine itself uses to load levels and we’re directly calling it from Tiled.

You’ll need to set three different custom attributes to each one of these shapes in order to properly trigger the level change:

  • to: yeah, just “to”, this will identify the name of the level to load (this name should match the value you used on your resources.js file).
  • fade: an hex code identifying the color to fade into for the level transition (i.e if you set it to #FFFFFF it will fade to white and then back to normal while switching).
  • duration: a number indicating the duration (in milliseconds) of the fade effect.

That is it, with those three simple attributes, you’ve created a simple door that you can use to move from level to level. And to provide a practical example of this, I setup this quick example:

This is image title

Essentially, it’s a simple map with three different doors that take you to three different levels, each one taking you back to the original once you reach the end of it. Here is a quick video showing how everything works:

And from your code perspective, assuming you’re using the platformer example provided by the game, all you have to remember to do, is to add the extra maps to your resources.js file:

//...
{ name: "map1",            type: "tmx",    src: "data/map/map1.tmx" },
{ name: "map2",            type: "tmx",    src: "data/map/map2.tmx" },
{ name: "map3",            type: "tmx",    src: "data/map/map3.tmx" },
{ name: "map4",            type: "tmx",    src: "data/map/map4.tmx" },
//...

maps-added.js

Notice those “names”, those are the ones you should use on your “to” properties for each door.

Conclusion

That was super easy, yet it’s a super-powerful feature that allows you to create very complex structures with minimum code. This, if you ask me, is a great time-saver for any game developer trying to create large levels with very little time.

By the way, remember I’ve written a very detailed overview of what it takes to create a platformer game over here, so if you haven’t read that one yet, I encourage you to do so. That one covers a lot of concepts I have quickly glossed over in this one.

Otherwise, thanks for reading and stay-tuned because there are more articles like this one to come!

#game #javascript #MelonJS

What is GEEK

Buddha Community

Moving Between Screens in Your Game Using MelonJS
Autumn  Blick

Autumn Blick

1602565700

Game Development with .NET

We’ve launched a new Game Development with .NET section on our site. It’s designed for current .NET developers to explore all the choices available to them when developing games. It’s also designed for new developers trying to learn how to use .NET by making games. We’ve also launched a new game development Learn portal for .NET filled with tutorials, videos, and documentation provided by Microsoft and others in the .NET game development community. Finally, we launched a step-by-step Unity get-started tutorial that will get you started with Unity and writing C## scripts for it in no time. We are excited to show you what .NET has to offer to you when making games. .NET is also part of Microsoft Game Stack, a comprehensive suite of tools and services just for game development.

A picture of a game controller

.NET for game developers

.NET is cross-platform. With .NET you can target over 25+ different platforms with a single code base. You can make games for, but not limited to, Windows, macOS, Linux, Android, iOS, Xbox, PlayStation, Nintendo, and mixed reality devices.

C## is the most popular programming language in game development. The wider .NET community is also big. There is no lack of expertise and support you can find from individuals and user groups, locally or online.

.NET does not just cover building your game. You can also use it to build your game’s website with ASP.NET, your mobile app using Xamarin, and even do remote rendering with Microsoft Azure. Your skills will transfer across the entire game development pipeline.

logos of some gaming platforms supported by .NET

Available game engines

The first step to developing games in .NET is to choose a game engine. You can think of engines as the frameworks and tools you use for developing your game. There are many game engines that use .NET and they differ widely. Some of the engines are commercial and some are completely royalty free and open source. I am excited to see some of them planning to adopt .NET 5 soon. Just choose the engine that better works for you and your game. Would you like to read a blog post to help you learn about .NET game engines, and which one would be best for you?

#.net #.net core #azure #c# #game development #azure #cryengine #game developers #game development #game development with .net #game engines #games #monogame #playfab #stride #unity #visual studio #waveengine

Ellis Herbert

Ellis Herbert

1574311008

Moving Between Screens in Your Game Using MelonJS

MelonJS is a very powerful and versatile 2D HTML Game Engine and although its documentation is quite extensive, there is a lack of explained examples when it comes to developing a game.

Screen vs Game State

One distinction to make before moving forward is that of screens vs game states. This is mainly because both concepts can get confused with each other given the right circumstances.

A Game State can be defined for when you need to have extra control over the current status of your game. In other words, it could very well be another screen or it could be something like a pause screen, a main menu, an end credits screen or anything non-playable. In such cases, you’re able to control the game by providing a handler object for this new state (i.e removing characters from the screen, playing different background music, you get the point).

You’d usually define all possible game states as part of your loaded method inside the game entity.

// set the "Play/Ingame" Screen Object
me.state.set(me.state.PLAY, new game.PlayScreen());
me.state.set(me.state.MENU, new game.TitleScreen());
me.state.set(me.state.GAME_END, new game.EndTitleScreen());

game-states.js

The above three lines configure all possible states the game can have, and which ones are the handlers for each. You can later load a particular state with a line such as:

me.state.change(me.state.MENU);

Out of the box, melonJS provides 9 different game states you can use (CREDITS, GAME_END, GAMEOVER, LOADING, PLAY, READY, MENU, SCORE and SETTINGS). That being said, there is also a tenth state called USER, which can be used to define user-created states (after all, you can’t expect the creators of melonJS to predict all possible states you’ll need for your game). So you could easily create more valid constants which you can later register like above. And these constants are created like this:

const STATE_INFO = me.state.USER + 0;
const STATE_WARN = me.state.USER + 1;
const STATE_ERROR = me.state.USER + 2;
const STATE_CUTSCENE = me.state.USER + 3;

new-states.js

On the other hand, screens can be thought of as new playable levels. Changing between screens implies that the game continues in the same state (playable) only with a different level loaded. Mind you, you can potentially achieve the same effect using game states, but that would be somewhat of an overkill, and you’ll see why in a minute.

What’s in a level?

But before we delve into the details, what do you need to add to a level to make it work? This actually depends on your approach towards game design with melonJS, after all, you can load all entities using code or, you can take advantage of the amazing integration between Tiled and melonJS and create the entities right there on the map.

Because I’m lazy and I really like to visualize where everything is for a level instead of using my imagination and a lot of trial and error with hand-coded coordinates I prefer the second option.

With that being said, the bare minimum I need to add into a level to make it work is:

  • A layer for collisions (with all the objects defining the collision map)
  • A layer for the terrain (that can be an image layer, a tile layer or whatever you think you need)
  • An object layer where you can add a single object for your main player.

With that, you have a playable level, it’s probably a very boring one by itself, but it works.

Collisions work out of the box as long as your layer’s name starts with that word (amazing use of convention over configuration if you ask me). Any shape you add to this layer (which of course, should be an object layer) is assigned a collisionType of WORLD_SHAPE automatically. You can see how the platformer example reacts to the type on the player’s onCollision code:

 onCollision : function (response, other) {
        //console.log("Colliding with: ", other.body.collisionType)
        //onsole.log(me.collision.types)
        switch (other.body.collisionType) {
            case me.collision.types.WORLD_SHAPE:
                this.standing = true
                // Simulate a platform object
                if (other.type === "platform") {
                    if (this.body.falling &&
                        //!me.input.isKeyPressed("down") &&
                        // Shortest overlap would move the player upward
                        (response.overlapV.y > 0) &&
                        // The velocity is reasonably fast enough to have penetrated to the overlap depth
                        (~~this.body.vel.y >= ~~response.overlapV.y)
                    ) {
                        // Disable collision on the x axis
                        response.overlapV.x = 0;
                        // Repond to the platform (it is solid)
                        return true;
                    }
                    // Do not respond to the platform (pass through)
                    return false;
                }

                // Custom collision response for slopes
                else if (other.type === "slope") {
                    // Always adjust the collision response upward
                    response.overlapV.y = Math.abs(response.overlap);
                    response.overlapV.x = 0;

                    // Respond to the slope (it is solid)
                    return true;
                }
                break;

       //....
        }
 }

on-collision-example.js

You can even set the shape’s type to “slope” if you want the player to be able to run up those inclined angled shapes.

This is image title

Notice the triangular shape I added on the above image. The type set to “slope” is what will allow the player to run up that surface, otherwise it will act as a vertical wall.

The terrain can be either a tile layer, which means you will use your tileset to generate the terrain your player will move on, or you can simply use an image layer. The point here is that since your collision map is defined in another layer, this is merely visual and can be anything you like.

The player is represented in this map as a simple shape (ideally a rectangle) located right where the player is supposed to start the level. The dimensions of the rectangle here are actually important, since they will represent the size of the hitbox (the one used to calculate collisions).

The other key point about this object, is that its name (the name attribute in Tiled) needs to match the name you used to register the entity in your code.

With that being said, let’s now take a quick look at how to switch between levels using Tiled directly.

Switching between levels

Now that we understand how to create levels and what to add into them, the only part left is to understand what you need to add in order to make it switch between levels.

And it’s actually super simple: the magic happens when you add a shape called me.LevelEntity . Essentially this is a pre-defined entity that the engine itself uses to load levels and we’re directly calling it from Tiled.

You’ll need to set three different custom attributes to each one of these shapes in order to properly trigger the level change:

  • to: yeah, just “to”, this will identify the name of the level to load (this name should match the value you used on your resources.js file).
  • fade: an hex code identifying the color to fade into for the level transition (i.e if you set it to #FFFFFF it will fade to white and then back to normal while switching).
  • duration: a number indicating the duration (in milliseconds) of the fade effect.

That is it, with those three simple attributes, you’ve created a simple door that you can use to move from level to level. And to provide a practical example of this, I setup this quick example:

This is image title

Essentially, it’s a simple map with three different doors that take you to three different levels, each one taking you back to the original once you reach the end of it. Here is a quick video showing how everything works:

And from your code perspective, assuming you’re using the platformer example provided by the game, all you have to remember to do, is to add the extra maps to your resources.js file:

//...
{ name: "map1",            type: "tmx",    src: "data/map/map1.tmx" },
{ name: "map2",            type: "tmx",    src: "data/map/map2.tmx" },
{ name: "map3",            type: "tmx",    src: "data/map/map3.tmx" },
{ name: "map4",            type: "tmx",    src: "data/map/map4.tmx" },
//...

maps-added.js

Notice those “names”, those are the ones you should use on your “to” properties for each door.

Conclusion

That was super easy, yet it’s a super-powerful feature that allows you to create very complex structures with minimum code. This, if you ask me, is a great time-saver for any game developer trying to create large levels with very little time.

By the way, remember I’ve written a very detailed overview of what it takes to create a platformer game over here, so if you haven’t read that one yet, I encourage you to do so. That one covers a lot of concepts I have quickly glossed over in this one.

Otherwise, thanks for reading and stay-tuned because there are more articles like this one to come!

#game #javascript #MelonJS

Arvel  Parker

Arvel Parker

1591627260

How to Use the Screen Command in Linux

Screen is a terminal program in Linux which allows us to use a virtual (VT100 terminal) as full-screen window manager which multiplexes an open physical terminal between multiple processes, which are typically, interactive shells. It allows us to access multiple terminal sessions within a single terminal or a remote terminal session. It is most useful when addressing multiple Linux shell commands on the command line, as well as separating commands from the shell that started the commands.

Screen also allows a user to initiate a command from one terminal, disconnect from that terminal, and then reconnect from a different location to that same terminal, while using a different terminal without having to restart the command. This simply lets a user better control multiple and separate command windows.

Screen also lets multiple remote computers connect to the same screen session at once. This allows multiple users to connect to the same screen session allowing a second user to follow along with another administrator working on a server.

#tutorials #attach #cli #command line #detach #key bindings #logging #multiplex #multiuser #multiuser mode #remote access #remote management #remote session #remote terminal #screen #screen logging #screen session #screenlog #screens #scrollback #shell #terminal #terminal session #terminal window #tty #vt100

Juned Ghanchi

1620900204

Mobile Game Development Company India, Game Developers in India

IndianAppDevelopers is a top-notch mobile game development company that has the ability to transform the unique requirements of clients into a flawless mobile game app. Choose us as your mobile game development partner on a fixed cost, dedicated or hourly basis at 40% less cost.

Our dedicated team of 20+ game developers has served 50+ mobile game development projects with a ratio of 100% satisfaction using the latest technologies and tools like Unity, Unreal, COCOS 2d js. Phaser etc.

Are you planning to outsource mobile game development services? Or would you like to hire a dedicated team of game developers? Then, contact us for a free quote.

#mobile game development company #game development company #hire game developers #game app developers #mobile game developers india #hire game app developers

Why Use WordPress? What Can You Do With WordPress?

Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?

WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:

1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.

2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.

3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.

4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.

5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.

6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.

Read More

#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website