Како што спомнав на крајот на првиот дел од овој серијал,  во овој дел ќе започнам со развивање на Pong клон. Прво ќе ви објаснам како да ги подготвите екстерните фајлови (слики, спрајтови, звуци итн.), па ќе го креираме проектот каде што ќе ја развиваме играта, ќе ги внесеме компајлираните .xnb фајлови од екстерните фајлови, ќе креираме неколку класи за на крај да ги нацртаме објектите на екран. Без да должам, одиме со првиот чекор.

Подготовка на Екстерни Фајлови

Како што спомнав во првиот дел, Content Pipeline-от за Windows 8 верзијата на MonoGame сеуште не е спремен и затоа ни треба XNA за да ги компајлираме сите надворешни фајлови. Потоа, овие компајлирани фајлови можеме да ги искористиме во нашиот MonoGame проект.

Најпрво превземете го .rar компресираниот фајл наречен Pong Assets од тука. По превземањето, екстрактирајте ги фајловите кои што се внатре во фолдер по ваш избор (пример Desktop). Пуштете го Visual Studio 2012 Express for Windows Phone и креирајте нов Windows Phone Game (4.0) проект. Крстете го PongContent и притиснете ОК.

 

Откако ќе се креира проектот, притиснете десен клик на Content проектот кој што се наоѓа десно Add –> Existing Items…

Навигирајте до фолдерот каде што претходно ги екстрактиравте фајловите, селектирајте ги сите фајлови и притиснете Add за да ги додадете во проектот.

Наредниот чекор е да се компајлира проектот. Притиснете Build –> Build Solution или CTRL+Shift+B на тастатура.

Откако компајлирањето ќе се комплетира, исклучете го Visual Studio 2012 Express for Windows Phone и пуштете Visual Studio 2012 Express for Windows 8.

Креирајте нов проект, изберете MonoGame Game, крстете го PongClone и притиснете OK.

Доколку ги пратевте инструкциите од првиот дел за сетирање на MonoGame преку клонирање на Git репозиторија, сега ќе треба да се повторат чекорите кои што ги напишав под ‘Тестирање на MonoGame’. Тие беа: бришење на постоечките референци, додавање на MonoGame проектот и додавање референца до MonoGame проектот. Доколку не се сеќавате како се правеше тоа, прочитајте ги повторно тука (инструкциите се наоѓаат на крајот – ‘Тестирање на MonoGame’).

Ако го инсталиравте MonoGame преку инсталерот, нема потреба од дополнително сетирање. Со самото креирање на проектот, автоматски се додаваат точните референци до потребните библиотеки.

За секој случај, притиснете F5 или Debug –> Start Debugging за да тестирате дали MonoGame функционира. Доколку ви се појави сина боја, се е во ред и може да продолжиме со наредниот чекор.

Притиснете десен клик на PongClone проектот Add –> New Folder. Крстете го новиот фолдер ‘Content’ (без наводници).

Притиснете десен клик на фолдерот Add –> Existing Item…и навигирајте во:

…\Documents\Visual Studio 2012\Projects\PongContent\PongContent\PongContent\bin\Windows Phone\Debug\Content

Селектирајте ги сите .xnb фајлови и притиснете Add.

 

 

 

 

Следно, селектирајте ги додадените фајлови како што е покажано на сликата лево, под Properties сменете го Build Action од None во Content. (Притиснете на сликата за зум)

 

 

 

 

 

 

Oвој чекор ја комплетира подготовката на екстерните фајлови. Постојат и други начини кои што се малку побрзи (додавање Windows Phone library и Content проект) но за нив потребен е Visual Studio 2012 Professional/Ultimate и се малку покомплексни.

Game Loop

MonoGame ги има истите XNA имиња на namespace-ови, класи, методи итн. Отворете го Game1.cs фајлот каде што е напишан ‘Main’-от на апликацијата. Во истиот фајл, покрај конструкторот, ќе забележите 5 методи: Initialize, LoadContent, UnloadContent, Update и Draw.

Првите два се користат за сетирање на почетните вредности и вчитување на екстерните фајлови. UnloadContent, се користи кога се исклучува апликацијата за да се ослободат вчитаните фајлови. Update и Draw се методите каде што се случуваат чуда! Овие два методи се постојано во еден циклус кој што се нарекува Game Loop и во зависност од платформата може да се сетира брзината во фрејмови во една секунда (FPS).

Во Update се става целата логика (движење, инпут, процесирање на колизии, физика итн.). После сите калкулации се преминува на Draw кој што се користи за цртање на објектите во дадена позиција.

 

GameObject, Player и Ball

За нашиот Pong клон, ќе креираме неколку класи. Во овој дел од серијалот, целта ни е да ги нацртаме објектите на екран. Пред да почнеме со пишување на класите за објектите, ќе напишеме неколку линии за да ги зачуваме димензиите на екранот во секој момент.

Отворете го Game1.cs фајлот доколку претходно не го отворивте и под веќе напишаните линии за _graphics и _spriteBatch додадете две статични int променливи каде што ќе се чува ширината и висината на екранот.

        
GraphicsDeviceManager _graphics;
SpriteBatch _spriteBatch;

public static int ScreenWidth;
public static int ScreenHeight;

 

Малку подолу, во методот Initialize, иницијализирајте ги двете променливи:

ScreenWidth = GraphicsDevice.Viewport.Width;
ScreenHeight = GraphicsDevice.Viewport.Height;

base.Initialize();

 

Сега, во Update методот додадете ги истите две линии.

ScreenWidth = GraphicsDevice.Viewport.Width;
ScreenHeight = GraphicsDevice.Viewport.Height;

base.Update(gameTime);

 

Со овие линии, ќе ги имаме димензиите на екранот во секој момент, кога и да се сменат (пример Snap View во Windows 8).

Сега може да ги креираме класите за објектите кои што ќе ги користиме во играта. Бидејќи играчите и топчето имаат неколку заеднички атрибути, ќе креираме една супер класа наречена GameObject и од таа класа ќе има наследување за Player и Ball.

Притиснете десен клик на PongClone проектот и додадете нов фолдер ‘Classes’ (без наводници). Притиснете десен клик на ‘Classes’ фолдерот, Add –> Class…

Крстете ја класата GameObject и притиснете Add.

Повторете го истото за да ги додадете класите за Player и Ball.

Отворете ја GameObject класата и преправете ја во следното:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

namespace PongClone
{
    public class GameObject
    {
        public Vector2 Position;
        public Texture2D Texture;
    }
}

 

Ќе забележите во линиите 6 и 7 додадени се две библиотеки кои што ги содржат Vector2 и Texture2D класите искористени во линиите 13 и 14. Исто така во линија 9 избришан е .Classes за да можеме да пристапиме до GameObject класата без да пишуваме Classes.GameObject.

Во линија 11 додаден е зборот public за да може да пристапиме до класата од други класи. Во линија 13, деклариран е дво-димензионален вектор за позиција кој што содржи X и Y координата. Во линија 14, декларирана е променлива за да се зачува текстурата на објектот.

Напомена: Во нашата игра ќе избегнувам користење на private, protected итн. зборови поради едноставност.

Нареден чекор е да се додаде метод за цртање. Додадете го следниот метод:

public void Draw(SpriteBatch spriteBatch)
{
	spriteBatch.Draw(Texture, Position, Color.White);
}

 

Со овој метод се користи SpriteBatch објект за цртање на 2Д објекти на екран. spriteBatch.Draw(…) методот има неколку overload-и, јас ќе го искористам четвртиот каде што се користат Texture2D, Vector2 и Color параметри. Оваа линија ја црта дадената текстура Texture во дадена позиција Position. Последниот параметар се користи за менување на бојата на текстурата. Color.White се користи за зачувување на оригиналната боја на самата текстура.

Отворете ја Player.cs класата и преправете ја во следното:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace PongClone
{
    public class Player : GameObject
    {
    }
}

 

Во линија 7 избришан е .Classes. Во линија 9, додаден е зборот public и : GameObject за да се означи наследување од GameObject.

Отворете ја Ball.cs класата и преправете ја во следното:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace PongClone
{
    public class Ball : GameObject
    {
    }
}

 

Исто и тука, направени се истите промени.

Цртање на Играчите и Топчето

Отворете ја Game1.cs класата и креирајте променливи за играчите и топчето. Исто така ќе креираме и една int константа за офсет на играчите од десниот и левиот крај на екранот:

const int PADDLE_OFFSET = 70;

Player player1;
Player player2;
Ball ball;

 

Бројката 70 ќе ни претставува 70 пиксели офсет од левата и десната страна на екранот.

Преправете го Initialize методот во следното:

protected override void Initialize()
{
	// TODO: Add your initialization logic here

	ScreenWidth = GraphicsDevice.Viewport.Width;
	ScreenHeight = GraphicsDevice.Viewport.Height;

	player1 = new Player();
	player2 = new Player();
	ball = new Ball();
            
	base.Initialize();
}

Во линиите 8,9 и 10 се креираат објектите за играчите и топчето. Следно, ќе треба да се вчитаат текстурите и да се сетираат почетните позиции на трите објекти.

Преправете го LoadContent во следното:

protected override void LoadContent()
{
	// Create a new SpriteBatch, which can be used to draw textures.
	_spriteBatch = new SpriteBatch(GraphicsDevice);

	// TODO: use this.Content to load your game content here
	player1.Texture = Content.Load<Texture2D>("Paddle");
	player2.Texture = Content.Load<Texture2D>("Paddle");

	player1.Position = new Vector2(PADDLE_OFFSET, ScreenHeight / 2 - player1.Texture.Height / 2);
	player2.Position = new Vector2(ScreenWidth - player2.Texture.Width - PADDLE_OFFSET, ScreenHeight / 2 - player2.Texture.Height / 2);

	ball.Texture = Content.Load<Texture2D>("Ball");
	ball.Position = new Vector2(ScreenWidth / 2 - ball.Texture.Width / 2, ScreenHeight / 2 - ball.Texture.Height / 2);
}

 

Во линиите 7 и 8 ја вчитуваме истата текстура за двајцата играчи. Текстурата ни се наоѓа во Content фолдерот. Потоа ги сетираме позициите на играчите. Во 10тата линија, за X координатата го користиме офсет-от од 70 пиксели. За Y координатата ја земаме во предвид висината на екранот и висината на текстурата на играчот за точно да се постави на средина.

Во 11тата линија се зема во предвид целата ширина на екранот за да се постави вториот играч на десната страна.

Во линиите 13 и 14, се вчитува текстурата за топчето и се сетира позицијата на топчето.

Напомена: (0,0) на екранот се наоѓа на горниот лев агол. Слика тука.

Конечно стигнавме до последниот дел, цртање на објектите. Преправете го Draw методот во следното:

protected override void Draw(GameTime gameTime)
{
	GraphicsDevice.Clear(Color.Black);

	// TODO: Add your drawing code here
	_spriteBatch.Begin();
	player1.Draw(_spriteBatch);
	player2.Draw(_spriteBatch);
	ball.Draw(_spriteBatch);
	_spriteBatch.End();
	base.Draw(gameTime);
}

 

Во третата линија, смената е бојата на позадината од CornflowerBlue во Black. Потоа за да се започне со цртање, се користи методот _spriteBatch.Begin() . Во линиите 7, 8 и 9 го користиме методот кој што го напишавме во GameObject класата за да ги нацртаме елементите. Откако се завршува со цртање, се прекинува SpriteBatch објектот со _spriteBatch.End().

Притиснете F5 или Debug –> Start Debugging. Доколку немате некакви синтаксички грешки би требало да го гледате ова:

Целосниот Solution на овој дел, може да го спуштете од тука.

Напомена: Ќе треба да ги сетирате референците до MonoGame за да го тестирате мојот Solution.

Доколку имате некакви проблеми, оставете коментар подолу.

Во третиот дел, ќе ставиме инпут, движење и колизии.

Advertisements