Dylan  Iqbal

Dylan Iqbal

1627933500

Build a Space Game: Draw Hero and Monsters to Canvas

The Canvas

The canvas is an HTML element that by default has no content; it's a blank slate. You need to add to it by drawing on it.

Read more about the Canvas API on MDN.

Here's how it's typically declared, as part of the page's body:

<canvas id="myCanvas" width="200" height="100"></canvas>

Above we are setting the id, width and height.

  • id: set this so you can obtain a reference when you need to interact with it.
  • width: this is the width of the element.
  • height: this is the height of the element.

Drawing simple geometry

The Canvas is using a cartesian coordinate system to draw things. Thus it uses an x-axis and y-axis to express where something is located. The location 0,0 is the top left position and the bottom right is what you said to be the WIDTH and HEIGHT of the canvas.

the canvas's grid

Image from MDN

To draw on the canvas element you will need to go through the following steps:

  1. Get a reference to the Canvas element.
  2. Get a reference on the Context element that sits on the canvas element.
  3. Perform a drawing operation using the context element.

Code for the above steps usually looks like so:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the WebGL API.

You can draw all sorts of things with the Canvas API like:

  • Geometrical shapes, we've already showed how to draw a rectangle, but there is much more you can draw.
  • Text, you can draw a text with any font and color you wish.
  • Images, you can draw an image based off of an image asset like a .jpg or .png for example.

Try it! You know how to draw a rectangle, can you draw a circle to a page? Take a look at some interesting Canvas drawings on CodePen. Here's a particularly impressive example.

Load and draw an image asset

You load an image asset by creating an Image object and set its src property. Then you listen to the load event to know when it's ready to be used. The code looks like this:

Load asset

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

Load asset pattern

It's recommended to wrap the above in a construct like so, so it's easier to use and you only try to manipulate it when it's fully loaded:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

To draw game assets to a screen, your code would look like this:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

Now it's time to start building your game

What to build

You will build a web page with a Canvas element. It should render a black screen 1024*768. We've provided you with two images:

Hero ship

Hero ship

5*5 monster

Monster ship

Recommended steps to start development

Locate the files that have been created for you in the your-work sub folder. It should contain the following:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Open the copy of this folder in Visual Studio Code. You need to have a local development environment setup, preferably with Visual Studio Code with NPM and Node installed. If you don't have npm set up on your computer, here's how to do that.

Start your project by navigating to the your_work folder:

cd your-work
npm start

The above will start a HTTP Server on address http://localhost:5000. Open up a browser and input that address. It's a blank page right now, but that will change

Note: to see changes on your screen, refresh your browser.

Add code

Add the needed code to your-work/app.js to solve the below

Draw a canvas with black background

tip: add two lines under the appropriate TODO in /app.js, setting the ctx element to be black and the top/left coordinates to be at 0,0 and the height and width to equal that of the canvas.

Load textures

tip: add the player and enemy images using await loadTexture and passing in the image path. You won't see them on the screen yet!

Draw hero in the center of the screen in the bottom half

tip: use the drawImage API to draw heroImg to the screen, setting canvas.width / 2 - 45 and canvas.height - canvas.height / 4);

Draw 5*5 monsters

tip: Now you can uncomment the code to draw enemies on the screen. Next, go to the createEnemies function and build it out.

First, set up some constants:

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

then, create a loop to draw the array of monsters onto the screen:

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

Result

The finished result should look like so:

Black screen with a hero and 5*5 monsters

Solution

Please try solving it yourself first but if you get stuck, have a look at a solution

Challenge

You've learned about drawing with the 2D-focused Canvas API; take a look at the WebGL API, and try to draw a 3D object.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Learn more about the Canvas API by reading about it.

Assignment

Play with the Canvas API

Originally published at https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md 

#gamedev #html #canvas

 

 

What is GEEK

Buddha Community

Build a Space Game: Draw Hero and Monsters to Canvas
Tamale  Moses

Tamale Moses

1618698960

Playground Games and Turn 10 Studios respectively improved time on Visual Studio 2019

The C++ team at Visual Studio has delivered substantial build and link time improvements throughout Visual Studio 2019. This blog is Part 2 of a series of blogs showcasing real-world results of our efforts. See how the Gears 5 team benefited from iteration build time improvements in Part 1.

#c++ #performance #build throughput #build time #compile time #game development #games #gaming #iteration time #linker #video games

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

Sival Alethea

Sival Alethea

1624323600

Learn Python by Building Five Games - Full Course. DO NOT MISS!!!

Learn Python in this full tutorial course for beginners. This course takes a project-based approach. We have collected five great Python game tutorials together so you can learn Python while building five games. If you learn best by doing, this is the course for you.
⭐️ Course Contents ⭐️
⌨️ (0:01:18) Pong
⌨️ (0:45:36) Snake
⌨️ (1:34:57) Connect Four
⌨️ (2:42:36) Tetris
⌨️ (4:22:12) Online Multiplayer Game
📺 The video in this post was made by freeCodeCamp.org
The origin of the article: https://www.youtube.com/watch?v=XGf2GcyHPhc&list=PLWKjhJtqVAbnqBxcdjVGgT3uVR10bzTEB&index=4
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#python #games #learn python by building five game #project-based approach #game in python #learn python by building five games - full course

Dylan  Iqbal

Dylan Iqbal

1627933500

Build a Space Game: Draw Hero and Monsters to Canvas

The Canvas

The canvas is an HTML element that by default has no content; it's a blank slate. You need to add to it by drawing on it.

Read more about the Canvas API on MDN.

Here's how it's typically declared, as part of the page's body:

<canvas id="myCanvas" width="200" height="100"></canvas>

Above we are setting the id, width and height.

  • id: set this so you can obtain a reference when you need to interact with it.
  • width: this is the width of the element.
  • height: this is the height of the element.

Drawing simple geometry

The Canvas is using a cartesian coordinate system to draw things. Thus it uses an x-axis and y-axis to express where something is located. The location 0,0 is the top left position and the bottom right is what you said to be the WIDTH and HEIGHT of the canvas.

the canvas's grid

Image from MDN

To draw on the canvas element you will need to go through the following steps:

  1. Get a reference to the Canvas element.
  2. Get a reference on the Context element that sits on the canvas element.
  3. Perform a drawing operation using the context element.

Code for the above steps usually looks like so:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the WebGL API.

You can draw all sorts of things with the Canvas API like:

  • Geometrical shapes, we've already showed how to draw a rectangle, but there is much more you can draw.
  • Text, you can draw a text with any font and color you wish.
  • Images, you can draw an image based off of an image asset like a .jpg or .png for example.

Try it! You know how to draw a rectangle, can you draw a circle to a page? Take a look at some interesting Canvas drawings on CodePen. Here's a particularly impressive example.

Load and draw an image asset

You load an image asset by creating an Image object and set its src property. Then you listen to the load event to know when it's ready to be used. The code looks like this:

Load asset

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

Load asset pattern

It's recommended to wrap the above in a construct like so, so it's easier to use and you only try to manipulate it when it's fully loaded:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

To draw game assets to a screen, your code would look like this:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

Now it's time to start building your game

What to build

You will build a web page with a Canvas element. It should render a black screen 1024*768. We've provided you with two images:

Hero ship

Hero ship

5*5 monster

Monster ship

Recommended steps to start development

Locate the files that have been created for you in the your-work sub folder. It should contain the following:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Open the copy of this folder in Visual Studio Code. You need to have a local development environment setup, preferably with Visual Studio Code with NPM and Node installed. If you don't have npm set up on your computer, here's how to do that.

Start your project by navigating to the your_work folder:

cd your-work
npm start

The above will start a HTTP Server on address http://localhost:5000. Open up a browser and input that address. It's a blank page right now, but that will change

Note: to see changes on your screen, refresh your browser.

Add code

Add the needed code to your-work/app.js to solve the below

Draw a canvas with black background

tip: add two lines under the appropriate TODO in /app.js, setting the ctx element to be black and the top/left coordinates to be at 0,0 and the height and width to equal that of the canvas.

Load textures

tip: add the player and enemy images using await loadTexture and passing in the image path. You won't see them on the screen yet!

Draw hero in the center of the screen in the bottom half

tip: use the drawImage API to draw heroImg to the screen, setting canvas.width / 2 - 45 and canvas.height - canvas.height / 4);

Draw 5*5 monsters

tip: Now you can uncomment the code to draw enemies on the screen. Next, go to the createEnemies function and build it out.

First, set up some constants:

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

then, create a loop to draw the array of monsters onto the screen:

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

Result

The finished result should look like so:

Black screen with a hero and 5*5 monsters

Solution

Please try solving it yourself first but if you get stuck, have a look at a solution

Challenge

You've learned about drawing with the 2D-focused Canvas API; take a look at the WebGL API, and try to draw a 3D object.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Learn more about the Canvas API by reading about it.

Assignment

Play with the Canvas API

Originally published at https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md 

#gamedev #html #canvas

 

 

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