Nat  Grady

Nat Grady

1670405643

How to Continuous Side Scrolling in A Phaser Game with Tile Sprites

In 2D games, it is not uncommon to want animated backgrounds. Having static images in your levels doesn’t necessarily add to the game-play experience, so a little bit of motion can go a long way.

So how can you do this without having to manage these background images like you would a typical sprite?

Rather than worrying about creating, destroying, and managing sprites to represent components of your background, it might make sense to use a tile sprite, sometimes referred to as a tilemap. With a tile sprite you are grabbing tiles from an image and using them wherever you might need them. This approach is common for game backgrounds or levels that have a lot of asset repetition because it takes less resources and will leave you with a higher performance game.

In this tutorial, we’re going to see how to use a tile sprite in a Phaser 3.x game to add an infinite scrolling effect to the background in our game.

To get an idea of what we want to accomplish, take a look at the following animated image:

Tile Sprite Scrolling in Phaser

In the above Phaser 3.x game, there are two images, one with large clouds and one with small clouds. These images both have the same resolution as the game canvas. As these images scroll off the screen, they are added again to the other end to give us a continuous scrolling effect without having to manage each individual cloud.

Getting Started with a Phaser 3.x Project

Before we get into the core material of this particular tutorial, we need to set the foundation of our project, and by foundation I mean add a bunch of boilerplate Phaser 3.x code.

On your computer, create a new directory and within that directory create an index.html file. Within that index.html file, add the following markup:

<!DOCTYPE html>
<html>
    <head>
        <script src="//cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.min.js"></script>
    </head>
    <body>
        <div id="game"></div>
        <script>

            const phaserConfig = {
                type: Phaser.AUTO,
                parent: "game",
                width: 1280,
                height: 720,
                backgroundColor: "#5DACD8",
                scene: {
                    init: initScene,
                    preload: preloadScene,
                    create: createScene,
                    update: updateScene
                }
            };

            const game = new Phaser.Game(phaserConfig);

            var cloudsWhite, cloudsWhiteSmall;

            function initScene() { }
            function preloadScene() {}
            function createScene() {}
            function updateScene() {}

        </script>
    </body>
</html>

Most of what we do for this tutorial will be done in the preloadScene, createScene, and updateScene functions. Take note that we have a cloudsWhite and cloudsWhiteSmall variable which will represent each of our two images.

With the project containing our boilerplate code, we can proceed to working with our tile sprites.

Creating and Animating a Tile Sprite Image

Before we start looking at creating tile sprites, you should have already created images to be used in this example. To make life a little easier, you can use the images that I’m using.

The first image represents the larger of the clouds:

Large Clouds Tile Sprite Image

The second image represents the smaller of the clouds, which in our example, are scrolling at a slower speed to try to demonstrate depth in our background animations:

Small Clouds Tile Sprite Image

Take note of the width of both images and then take note of the width we defined when configuring Phaser. While the widths match in this example, they don’t need to. I made them match because it makes the images a little easier to scroll in my opinion.

Now that we have some images to work with, let’s update the preloadScene function of our index.html file:

function preloadScene() {
    this.load.image("clouds-white", "clouds-white.png");
    this.load.image("clouds-white-small", "clouds-white-small.png");
}

Make sure to use the path to your images. In my example, the images are at the same path as my code.

With our images loaded, we can create tile sprites from them. Within the createScene function of our index.html file, include the following code:

function createScene() {
    cloudsWhite = this.add.tileSprite(640, 200, 1280, 400, "clouds-white");
    cloudsWhiteSmall = this.add.tileSprite(640, 200, 1280, 400, "clouds-white-small");
}

Probably the most difficult part to grasp of the above lines is in regards to the position and size of our tile sprite. The images I’m using in this example have a resolution of 1280x400, hence the size used in the tile sprite. When positioning the images, note that you’re working with the center point of the images. If I wanted to give the illusion that these clouds are at the top of the game, we would need to use half of whatever the image dimensions are.

The sizing and positioning took me a while to grasp, but it wasn’t too bad.

With a properly defined tile sprite, now we can start moving them. In the updateScene function, add the following code:

function updateScene() {
    cloudsWhite.tilePositionX += 0.5;
    cloudsWhiteSmall.tilePositionX += 0.25;
}

The above code will move our tiles at two different speeds. The tiles will scroll to the width of the game canvas and repeat.

Conclusion

You just saw how to scroll a background infinitely using tile sprites in a Phaser 3.x game. Not only are tile sprites great for performance reasons, but the simple act of animating your backgrounds can add a new level of depth to your already amazing game.

The way we scroll or animate tile sprites is different than we would be animating player or typical sprites. If you’re interested in creating a sprite animation based on frames, check out my previous tutorial on the subject titled, Animate a Compressed Sprite Atlas in a Phaser Game.

Original article source at: https://www.thepolyglotdeveloper.com/

#javascript #game 

What is GEEK

Buddha Community

How to Continuous Side Scrolling in A Phaser Game with Tile Sprites
Zachary Palmer

Zachary Palmer

1555901576

CSS Flexbox Tutorial | Build a Chat Application

Creating the conversation sidebar and main chat section

In this article we are going to focus on building a basic sidebar, and the main chat window inside our chat shell. See below.

Chat shell with a fixed width sidebar and expanded chat window

This is the second article in this series. You can check out the previous article for setting up the shell OR you can just check out the chat-shell branch from the following repository.

https://github.com/lyraddigital/flexbox-chat-app.git

Open up the chat.html file. You should have the following HTML.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chat App</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/chat.css" />
</head>
<body>
    <div id="chat-container">
    </div>
</body>
</html>

Now inside of the chat-container div add the following HTML.

<div id="side-bar">
</div>
<div id="chat-window">
</div>

Now let’s also add the following CSS under the #chat-container selector in the chat.css file.

#side-bar {
    background: #0048AA;
    border-radius: 10px 0 0 10px;
}
#chat-window {
    background: #999;
    border-radius: 0 10px 10px 0;
}

Now reload the page. You should see the following:-

So what happened? Where is our sidebar and where is our chat window? I expected to see a blue side bar and a grey chat window, but it’s no where to be found. Well it’s all good. This is because we have no content inside of either element, so it can be 0 pixels wide.

Sizing Flex Items

So now that we know that our items are 0 pixels wide, let’s attempt to size them. We’ll attempt to try this first using explicit widths.

Add the following width property to the #side-bar rule, then reload the page.

width: 275px;

Hmm. Same result. It’s still a blank shell. Oh wait I have to make sure the height is 100% too. So we better do that too. Once again add the following property to the #side-bar rule, then reload the page.

height: 100%;

So now we have our sidebar that has grown to be exactly 275 pixels wide, and is 100% high. So that’s it. We’re done right? Wrong. Let me ask you a question. How big is the chat window? Let’s test that by adding some text to it. Try this yourself just add some text. You should see something similar to this.

So as you can see the chat window is only as big as the text that’s inside of it, and it is not next to the side bar. And this makes sense because up until now the chat shell is not a flex container, and just a regular block level element.

So let’s make our chat shell a flex container. Set the following display property for the #chat-window selector. Then reload the page.

display: flex;

So as you can see by the above illustration, we can see it’s now next to the side bar, and not below it. But as you can see currently it’s only as wide as the text that’s inside of it.

But we want it to take up the remaining space of the chat shell. Well we know how to do this, as we did it in the previous article. Set the flex-grow property to 1 on the #chat-window selector. Basically copy and paste the property below and reload the page.

flex-grow: 1;

So now we have the chat window taking up the remaining space of the chat shell. Next, let’s remove the background property, and also remove all text inside the chat-window div if any still exists. You should now see the result below.

But are we done? Technically yes, but before we move on, let’s improve things a little bit.

Understanding the default alignment

If you remember, before we had defined our chat shell to be a flex container, we had to make sure we set the height of the side bar to be 100%. Otherwise it was 0 pixels high, and as a result nothing was displayed. With that said, try removing the height property from the #side-bar selector and see what happens when you reload the page. Yes that’s right, it still works. The height of the sidebar is still 100% high.

So what happened here? Why do we no longer have to worry about setting the height to 100%? Well this is one of the cool things Flexbox gives you for free. By default every flex item will stretch vertically to fill in the entire height of the flex container. We can in fact change this behaviour, and we will see how this is done in a future article.

Setting the size of the side bar properly

So another feature of Flexbox is being able to set the size of a flex item by using the flex-basis property. The flex-basis property allows you to specify an initial size of a flex item, before any growing or shrinking takes place. We’ll understand more about this in an upcoming article.

For now I just want you to understand one important thing. And that is using width to specify the size of the sidebar is not a good idea. Let’s see why.

Say that potentially, if the screen is mobile we want the side bar to now appear across the top of the chat shell, acting like a top bar instead. We can do this by changing the direction flex items can flex inside a flex container. For example, add the following CSS to the #chat-container selector. Then reload the page.

flex-direction: column;

So as you can see we are back to a blank shell. So firstly let’s understand what we actually did here. By setting the flex-direction property to column, we changed the direction of how the flex items flex. By default flex items will flex from left to right. However when we set flex-direction to column, it changes this behaviour forcing flex items to flex from top to bottom instead. On top of this, when the direction of flex changes, the sizing and alignment of flex items changes as well.

When flexing from left to right, we get a height of 100% for free as already mentioned, and then we made sure the side bar was set to be 275 pixels wide, by setting the width property.

However now that we a flexing from top to bottom, the width of the flex item by default would be 100% wide, and you would need to specify the height instead. So try this. Add the following property to the #side-bar selector to set the height of the side bar. Then reload the page.

height: 275px;

Now we are seeing the side bar again, as we gave it a fixed height too. But we still have that fixed width. That’s not what we wanted. We want the side bar (ie our new top bar) here to now be 100% wide. Comment out the width for a moment and reload the page again.

So now we were able to move our side bar so it appears on top instead, acting like a top bar. Which as previously mentioned might be suited for mobile device widths. But to do this we had to swap the value of width to be the value of height. Wouldn’t it be great if this size was preserved regardless of which direction our items are flexing.

Try this, remove all widths and height properties from the #side-bar selector and write the following instead. Then reload the page.

flex-basis: 275px;

As you can see we get the same result. Now remove the flex-direction property from the #chat-container selector. Then once again reload the page.

Once again we are back to our final output. But now we also have the flexibility to easily change the side bar to be a top bar if we need to, by just changing the direction items can flow. Regardless of the direction of flex, the size of our side bar / top bar is preserved.

Conclusion

Ok so once again we didn’t build much, but we did cover a lot of concepts about Flexbox around sizing. 

#css #programming #webdev 

lakshya world

lakshya world

1664775764

How to Create a Successful Gaming App?

How to create a game app is a comprehensive guide, explaining the entire process of creating and publishing games for iOS and Android. Covering all the essential information a budding game developer needs to know.

 

Read More - https://www.brsoftech.com/blog/how-to-create-a-game-app/

 

#game-engine  #game-development  #game  #games  #gaming 

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

Nat  Grady

Nat Grady

1670405643

How to Continuous Side Scrolling in A Phaser Game with Tile Sprites

In 2D games, it is not uncommon to want animated backgrounds. Having static images in your levels doesn’t necessarily add to the game-play experience, so a little bit of motion can go a long way.

So how can you do this without having to manage these background images like you would a typical sprite?

Rather than worrying about creating, destroying, and managing sprites to represent components of your background, it might make sense to use a tile sprite, sometimes referred to as a tilemap. With a tile sprite you are grabbing tiles from an image and using them wherever you might need them. This approach is common for game backgrounds or levels that have a lot of asset repetition because it takes less resources and will leave you with a higher performance game.

In this tutorial, we’re going to see how to use a tile sprite in a Phaser 3.x game to add an infinite scrolling effect to the background in our game.

To get an idea of what we want to accomplish, take a look at the following animated image:

Tile Sprite Scrolling in Phaser

In the above Phaser 3.x game, there are two images, one with large clouds and one with small clouds. These images both have the same resolution as the game canvas. As these images scroll off the screen, they are added again to the other end to give us a continuous scrolling effect without having to manage each individual cloud.

Getting Started with a Phaser 3.x Project

Before we get into the core material of this particular tutorial, we need to set the foundation of our project, and by foundation I mean add a bunch of boilerplate Phaser 3.x code.

On your computer, create a new directory and within that directory create an index.html file. Within that index.html file, add the following markup:

<!DOCTYPE html>
<html>
    <head>
        <script src="//cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.min.js"></script>
    </head>
    <body>
        <div id="game"></div>
        <script>

            const phaserConfig = {
                type: Phaser.AUTO,
                parent: "game",
                width: 1280,
                height: 720,
                backgroundColor: "#5DACD8",
                scene: {
                    init: initScene,
                    preload: preloadScene,
                    create: createScene,
                    update: updateScene
                }
            };

            const game = new Phaser.Game(phaserConfig);

            var cloudsWhite, cloudsWhiteSmall;

            function initScene() { }
            function preloadScene() {}
            function createScene() {}
            function updateScene() {}

        </script>
    </body>
</html>

Most of what we do for this tutorial will be done in the preloadScene, createScene, and updateScene functions. Take note that we have a cloudsWhite and cloudsWhiteSmall variable which will represent each of our two images.

With the project containing our boilerplate code, we can proceed to working with our tile sprites.

Creating and Animating a Tile Sprite Image

Before we start looking at creating tile sprites, you should have already created images to be used in this example. To make life a little easier, you can use the images that I’m using.

The first image represents the larger of the clouds:

Large Clouds Tile Sprite Image

The second image represents the smaller of the clouds, which in our example, are scrolling at a slower speed to try to demonstrate depth in our background animations:

Small Clouds Tile Sprite Image

Take note of the width of both images and then take note of the width we defined when configuring Phaser. While the widths match in this example, they don’t need to. I made them match because it makes the images a little easier to scroll in my opinion.

Now that we have some images to work with, let’s update the preloadScene function of our index.html file:

function preloadScene() {
    this.load.image("clouds-white", "clouds-white.png");
    this.load.image("clouds-white-small", "clouds-white-small.png");
}

Make sure to use the path to your images. In my example, the images are at the same path as my code.

With our images loaded, we can create tile sprites from them. Within the createScene function of our index.html file, include the following code:

function createScene() {
    cloudsWhite = this.add.tileSprite(640, 200, 1280, 400, "clouds-white");
    cloudsWhiteSmall = this.add.tileSprite(640, 200, 1280, 400, "clouds-white-small");
}

Probably the most difficult part to grasp of the above lines is in regards to the position and size of our tile sprite. The images I’m using in this example have a resolution of 1280x400, hence the size used in the tile sprite. When positioning the images, note that you’re working with the center point of the images. If I wanted to give the illusion that these clouds are at the top of the game, we would need to use half of whatever the image dimensions are.

The sizing and positioning took me a while to grasp, but it wasn’t too bad.

With a properly defined tile sprite, now we can start moving them. In the updateScene function, add the following code:

function updateScene() {
    cloudsWhite.tilePositionX += 0.5;
    cloudsWhiteSmall.tilePositionX += 0.25;
}

The above code will move our tiles at two different speeds. The tiles will scroll to the width of the game canvas and repeat.

Conclusion

You just saw how to scroll a background infinitely using tile sprites in a Phaser 3.x game. Not only are tile sprites great for performance reasons, but the simple act of animating your backgrounds can add a new level of depth to your already amazing game.

The way we scroll or animate tile sprites is different than we would be animating player or typical sprites. If you’re interested in creating a sprite animation based on frames, check out my previous tutorial on the subject titled, Animate a Compressed Sprite Atlas in a Phaser Game.

Original article source at: https://www.thepolyglotdeveloper.com/

#javascript #game 

Juned Ghanchi

1622631378

AI in Game Development - ITChronicles

For some years, artificial intelligence (AI) has been penetrating almost all digital spaces. After playing an instrumental role in digital communication and real-time problem-solving in many industries, AI in game development is expanding too. The significant impact of AI has played an instrumental role in the mobile and console game industry’s success.

AI has taken game development to new heights. AI helps to ensure greater satisfaction for gamers by addressing their objectives and concerns. AI also helps game developers come with higher-value additions and revisions based on data-driven insights,

AI is now showcasing many unprecedented opportunities in the gaming industry besides fulfilling its primary promise of delivering a great gaming experience. Here are some of the key ways AI is affecting the development of modern games.

**AI-Based Player Profiling **

Game developers now include AI-based player profiling within the game frameworks. This offers a game-playing experience that suits the target player profiles’ characteristic elements. You can hire game developers in India who are experts in creating AI-based player profiles equipped and thoroughly trained with game playing styles and different in-game player behaviors. These talented game developers can deliver a highly real-life environment within the game thanks to precise player profiling based on AI technology.

Read More: https://itchronicles.com/artificial-intelligence/ai-in-game-development/

#game development #game programming #game algorithms #game character design