XNA – Tvorba menu v Xna

V tomto článku sa naučíme, ako vytvoriť triedu Menu, ktorá môže byť rýchlo a ľahko presunutá aj do iného programu v XNA. Navyše je veľmi jednoduché prispôsobiť túto triedu, keď už je raz hotová.

Toto je rovnaké menu, aké vytvoril Dane Anderson vo svojej XNA hry “Box Wars”. Tu je odkaz na video, ak chcete vidieť toto menu v akcii. V hre menu vyzerá rozmazane, lebo bol použitý bloom efekt. Takže už máte nejaké extra informácie o menu, ktoré budete vytvárať v tomto článku. Pustime sa teda do tvorenia triedy s názvom “Menu”, ktorú môžete veľmi jednoducho začleniť do vašej hry. Po vytvorení novej triedy vo vašom projekte by ste mali dostať kód podobný nasledujúcemu:

using System;
using System.Collections.Generic;
using System.Text;

namespace Box_Wars
{
    class Menu
    {
    }
}

Pred tým, než začneme písať kód, pridajme tieto riadky k našim using príkazom:

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

Teraz môžeme začať s písaním kódu pre našu triedu. Najprv pridajme tieto premenné:

private static int MAX = 20;
private int menuItemCount;
private int curMenuItem;
private string[] menuItems;
private Vector2[] pos;
private double[] scale;
private Color unselected;
private Color selected;
private SpriteFont font;

MAX

maximálny počet prvkov povolených v tomto menu. Môžete ho zmeniť na ľubovoľnú hodnotu, ale pochybujem, že vaša hra bude niekedy mať viac ako 20 prvkov v jednom menu.

menuItemCount

celkový počet prvkov menu.

curMenuItem

index práve označeného prvku menu.

menuItems

pole, ktoré obsahuje všetky texty prvkov poľa.

pos

pole obsahujúce pozície každého prvku menu.

scale

pole obsahujúce hodnotu zväčšenia každého prvku menu.

unselected

farba neoznačeného prvku menu.

selected

farba označeného prvku menu.

font

SpriteFont, ktorý bude použitý na vypisovanie textu v menu.

Potom, čo ste pridali všetky premenné pre túto triedu, môžete pridať aj konštruktor:

public Menu(Color unslectedColor, Color selectedColor, SpriteFont sp)
{
    font = sp;
    menuItems = new string[MAX];
    pos = new Vector2[MAX];
    scale = new double[MAX];
    unselected = unslectedColor;
    selected = selectedColor;
    menuItemCount = 0;
    curMenuItem = 0;
}

Ďalej môžeme pridať funkciu, ktorá vám umožní jednoducho pridať prvky do vášho menu:

public void addMenuItem(string name, Vector2 p)
{
    if (menuItemCount < MAX)
    {
        menuItems[menuItemCount] = name;
        scale[menuItemCount] = 1.0f;
        pos[menuItemCount++] = p;
    }
}

Teraz pridajme možnosť pre jednoduché označenie nasledujúceho alebo predchádzajúceho prvku menu. Kód umožní užívateľovi označovať prvky menu dookola. To znamená, že ak sú naspodku zoznamu a stlačia tlačidlo pre ďalší prvok, prenesie ich to na začiatok. To spravíme týmito dvoma funkciami:

public void selectNext()
{
    if (curMenuItem < menuItemCount-1)
        curMenuItem++;
    else
        curMenuItem = 0;
}

public void selectPrev()
{
    if (curMenuItem > 0)
        curMenuItem--;
    else
        curMenuItem = menuItemCount-1;
}

Potom pridajme tieto prístupové metódy, ktoré vrátia index práve označeného prvku a jeho index:

public int getSelectedNum()
{
    return curMenuItem;
}

public string getSelectedName()
{
    return menuItems[curMenuItem];
}

Keď už toto máme hotové, je čas pridať posledné dve metódy našej triedy, Draw a Update. Metóda Update bude vyzerať takto:

public void Update(GameTime gameTime)
{
    for (int x = 0; x < menuItemCount; x++)
    {
        if (x == curMenuItem)
        {
            if (scale[x] < 2.0f)
                scale[x] += 0.04 + 10.0f * gameTime.ElapsedGameTime.Seconds;
        }
        else if (scale[x] > 1.0f && x!=curMenuItem)
            scale[x] -= 0.04 + 10.0f * gameTime.ElapsedGameTime.Seconds;
    }
}

V metóde Update prejdeme v cykle všetky prvky menu a pridáme efekty zväčšovania a zmenšovania sa na základe toho, či je prvok označený alebo nie. Toto je miesto, ktoré budete chcieť upraviť, keď budete chcieť pridať iné efekty.

Teraz môžete pridať metódu Draw:

public void Draw(SpriteBatch spriteBatch)
{
    spriteBatch.Begin();
    for (int x = 0; x < menuItemCount; x++)
    {
        if (x == curMenuItem)
        {
            Vector2 p = pos[x];
            p.X -= (float)(22 * scale[x] / 2);
            p.Y -= (float)(22 * scale[x] / 2);
            spriteBatch.DrawString(font,
                                   menuItems[x],
                                   p,
                                   selected,
                                   0.0f,
                                   new Vector2(0, 0),
                                   (float)scale[x],
                                   SpriteEffects.None,
                                   0);
        }
        else
        {
            Vector2 p = pos[x];
            p.X -= (float)(22 * scale[x] / 2);
            p.Y -= (float)(22 * scale[x] / 2);
            spriteBatch.DrawString(font,
                                   menuItems[x],
                                   p,
                                   unselected,
                                   0.0f,
                                   new Vector2(0, 0),
                                   (float)scale[x],
                                   SpriteEffects.None,
                                   0);
        }
    }

    spriteBatch.End();
}

Metóda Draw prispôsobuje vykresľovanie na základe veľkosti písma a jeho zväčšenia. Nakoniec máme kompletnú triedu Menu.

K tomuto článku je k dispozícii na stiahnutie zdrojový súbor a príkladový projekt.