Привіт шановні користувачі порталу GcUp.Ru! У цій статті я розповім Вам, як створити ігровий фон в XNA GameStudio. а так же познайомлю Вас з параметрами ігрового вікна і розповім в загальний рисах про XNA і його структурі. Весь наведений нижче код перевірений, і відмінно функціонує в версії 3.1. Але, так само він повинен працювати і в інших версіях (3.0 і 4.0; з цього приводу 2.0 не впевнений). Перед знайомством з цим уроком рекомендую прочитати статтю користувача E] [pert. так як тут використаний схожий принцип.
Знайомство з XNA Game Studio:
Для початку давайте створимо новий проект в Microsoft Visual C # Express. Для цього перейдіть в Файл -> Створити проект -> XNA Game Studio 3.1 (або 4.0) -> Windows Game (3.1). Так як з англійським у мене не дуже, назвемо його просто і зрозуміло - fon (так як я тестував даний код, проект fon у мене вже є, тому я назвав наш проект fon1). У Вас повинно вийти так:
Після цього натисніть кнопку «ОК». Натиснувши її, Ви, тим самим, створили новий проект гри для Windows. Тепер давайте подивимося на вікно «Обозреватель рішень», або «Solution Explorer». Як Ви бачите, там склалося кілька файлів.
Properties і Посилання пропускаємо, бо вони нам ні до чого. Слідом йде папка Content. Саме сюди завантажуються всі файли гри. Будь то музика, графіка або ефекти. Все міститься в цій папці. Далі йде файл Game.ico. Це ікона нашої гри. Пізніше я покажу, як вона буде виглядати. Так само Ви можете замінити її на будь-яку іншу, але дотримуючись розмір!
Слідом йде клас Game1.cs. Це головний клас даного проекту і працювати ми будемо саме в ньому. Ми ще до нього повернемося.
Далі слід ще одна ікона гри і останній клас даного проекту - Program.cs. З ним ми працювати не будемо. Скажу лише тільки, що в ньому створюється об'єкт класу Game1. який і запускає нашу гру.
Якщо Ви хочете побачити, як зараз виглядає наша гра, натисніть клавішу «F5». Як Ви бачите, відкрилося вікно з синім фоном. А вгорі якраз та сама ікона під назвою Game.ico.
І так, тепер перейдемо безпосередньо до роботи з класом Game1.
Ну, для початку давайте подивимося на структуру класу Game1.cs. Спочатку в ньому створені об'єкти graphics і spriteBatch.
Потім створений конструктор класу Game1. Якщо в двох словах, то конструктор вказує початкові (значення, які будуть з самого початку) значення змінних і об'єктів класу. Він нам знадобиться, коли ми будемо ставити розмір вікна нашого застосування, але про це пізніше.
Потім йдуть такі методи:
• Initialize () - відповідає за ініціалізацію (створення і прісваніе значень) змінних і об'єктів. Він нам потрібен буде майже для тих же самих цілей, що і конструктор.
• LoadContent () - завантажує в гру весь контент (графіку, музику і тп.), Який ми будемо використовувати.
• UnloadContent () - вивантажує весь контент з гри після виходу.
• Update (GameTime gameTime) - відповідає за зміну всіх значень в грі, будь то натискання клавіші або зміна часу.
• Draw (GameTime gameTime) - малює всю графіку в грі.
Ось, так в «двох словах» виглядає основний клас нашого пректу.
Тепер приступимо до наступного кроку, а саме до створення повноекранного режиму.
Давайте відразу розберемося, для чого це потрібно. Я це роблю для коректної відтворення фону. Адже під час створення фону Ви задаєте його розмір, який повинен відповідати розміру ігрового вікна. І для того що б не гадати, якого розміру вікно, наведемо його до стандартного. Нехай це буде 1024 x 768. Це стандартний розмір моніторів (по крайней мере, так нас вчили на уроках інформатики), і тому ми візьмемо його. Так само Ви можете вказати будь-який зручний для Вас розмір.
І нарешті ми переходимо до програмування. А саме в конструктор класу Game1. після рядків:
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> graphics = new GraphicsDeviceManager (this # 41 ;;
Content.RootDirectory = "Content";
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> graphics.PreferredBackBufferWidth = 1024; // ширина екрану
graphics.PreferredBackBufferHeight = 768; // його висота
graphics.IsFullScreen = true; // включаємо повноекранний режим
Як Ви помітили, в перших рядках конструктора був инициализирован об'єкт graphics класу GraphicsDeviceManager. який якраз і відповідає за налаштування відображення вікна. Далі ми просто прописали поля (різні властивості, такі як ширина, витота і тп.) Цього об'єкта. Що вони означають описано в коментарях. Єдине, на чому хочеться затримати Вашу увагу, це на рядку:
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> graphics.IsFullScreen = true;
Вона означає, що нашому вікна, по-перше, дається пріоретет (тобто воно буде поверх інших вікон), а по-друге вміст вікна (наша гра) розгорнеться на весь екран, т.е.не буде ні заголовка вікна, ні кнопок «згорнути» і «вийти» ні чого-небудь ще.
Правда, це ще не все. Що б вийти з такого додатка, знадобиться кожного разу натискати поєднання клавишь «Alt + F4», що не дуже зручно. Для того, що б той же вихід поставити на потрібну Вам клавішу (нехай це буде Esc. Яка найчастіше служить для виходу з гри), пропишіть в метод Update такий код:
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> keys = Keyboard.GetState (# 41 ;; // Ініціалізація об'єкта keys.
if (keys.IsKeyDown (Keys.Escape # 41; # 41; // Перевіряємо, чи натиснута кнопка
this.Exit (# 41 ;; // Якщо клавіша натиснута, то відбувається вихід
Залишилося тільки створити об'єкт keys класу KeyboardState. Для цього перед конструктором (після створення об'єктів) напишіть
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> KeyboardState keys;
Весь код класу Game1 на даний момент виглядає так:
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;
namespace fon1
<
///
/// This is the main type for your game
///
public class Game1. Microsoft.Xna.Framework.Game
<
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
KeyboardState keys;
public Game1 (# 41;
<
graphics = new GraphicsDeviceManager (this # 41 ;;
Content.RootDirectory = "Content";
graphics.PreferredBackBufferWidth = 1024;
graphics.PreferredBackBufferHeight = 768;
graphics.IsFullScreen = true;
>
///
/// Allows the game to perform any initialization it needs to before starting to run.
/// This is where it can query for any required services and load any non-graphic
/// related content. Calling base.Initialize will enumerate through any components
/// and initialize them as well.
///
protected override void Initialize (# 41;
<
// TODO: Add your initialization logic here
///
/// LoadContent will be called once per game and is the place to load
/// all of your content.
///
protected override void LoadContent (# 41;
<
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch (GraphicsDevice # 41 ;;
// TODO: use this.Content to load your game content here
>
///
/// UnloadContent will be called once per game and is the place to unload
/// all content.
///
protected override void UnloadContent (# 41;
<
// TODO: Unload any non ContentManager content here
>
///
/// Allows the game to run logic such as updating the world,
/// checking for collisions, gathering input, and playing audio.
///
/// Provides a snapshot of timing values.
protected override void Update (GameTime gameTime # 41;
<
// Allows the game to exit
if (GamePad.GetState (PlayerIndex.One # 41; .Buttons.Back == ButtonState.Pressed # 41;
this.Exit (# 41 ;;
keys = Keyboard.GetState (# 41 ;; // Ініціалізація об'єкта keys.
if (keys.IsKeyDown (Keys.Escape # 41; # 41; // Перевіряємо, чи натиснута кнопка
this.Exit (# 41 ;; // Якщо клавіша натиснута, то відбувається вихід
// TODO: Add your update logic here
///
/// This is called when the game should draw itself.
///
/// Provides a snapshot of timing values.
protected override void Draw (GameTime gameTime # 41;
<
GraphicsDevice.Clear (Color.CornflowerBlue # 41 ;;
// TODO: Add your drawing code here
Все, тепер все готово, і ми можемо перейти до головної теми нашої статті, а саме до створення фону до гри ...
І так, для початку давайте розберемося, що буде зображено на нашому фоні. У цьому уроці я покажу Вам, як додавати не тільки один шар фону (про це пізніше), і тому зроблю так ...
Ми візьмемо два фону. Перший, який буде на передньому плані, буде показувати нам кількість життів гравця, його окуляри і тп. Другий фон буде так званим «заднім фоном» і буде на задньому плані.
Так як я, на жаль, нічого складнішого поля для хрестиків-нуликів намалювати не можу, буду використовувати не дуже гарні малюнки, але, тим не менш, на їх прикладі буде зрозумілий принцип створення фону. Ось так повинен виглядати передній шар:
А задній шар нехай буде таким:
Все це повинно в підсумку виглядати приблизно так:
Зверніть увагу на те, що самий передній шар повинен бути в форматі * .png. і місце, в якому буде інший шар фону, потрібно вирізати. Інакше за переднім шаром нічого не буде видно. І НАЙГОЛОВНІШЕ! Запам'ятайте! Фон повинен бути розміром Вашого ігрового вікна (у нас це 1024x768). Інакше це буде не фон, а картинка в кутку екрану!
І так, якщо Ви підготували необхідні Вам фони, тоді приступимо! Зайдіть в XNA Game Studio і в вікні «Обозреватель рішень» ( «Solution Explorer») правою кнопкою миші на папці Content. Потім натисніть: Додати -> Існуючий елемент і виберіть обидва Ваших фону.
Попередньо назвіть їх fon1 (передній шар) і fon2 (задній шар). І так, тепер давайте пропишемо необхідний код. Власне кажучи, малювання фону практично не відрізняється від малювання спрайту. Але, відмінності все ж є. По-перше, фонів може бути кілька шарів (спрайтів теж може бути декілька шарів, але це практично ніде не використовується, на відміну від фону), а по-друге, координати фону вказувати простіше, бо просто потрібно вказати саме початок координатної площині екрану. Адже, фон і екран однакового розміру.
І так, для початку давайте створимо дві змінні. Відразу після рядка
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> KeyboardState keys;