Nel nostro gioco l'utente impersona un simpatico mostriciattolo verde che cerca di mangiarsi tutte le fragole che passano sullo schermo, evitando allo stesso tempo le insidiose bombe.
Per aggiungere il personaggio dobbiamo innanzitutto dichiarare una variabile di tipo Sprite
nella classe GameModel
. Torniamo quindi nel file GameModel.cs
e aggiungiamo il codice nelle dichiarazioni:
namespace SampleGame
{
class GameModel
{
private ScrollableBackground _gameBackGround;
private Storyboard GameLoopStoryboard;
private enGameState _gameState;
// Aggiunge lo sprite del giocatore
private Sprite _playerSprite;
public enum enGameState
{
PLAY = 1,
PAUSE = 2,
STOP = 3
};
Poi creiamo un metodo pubblico chiamato AddPlayer
che utilizzeremo in seguito per istanziare, inizializzare il personaggio ed aggiungerlo al background. Posizioniamoci quindi appena dopo il costruttore (ovvero la funzione GameModel()
che abbiamo creato in precedenza) e aggiungiamo il seguente codice:
public async Task<Boolean> AddPlayer()
{
// Crea il nuovo oggetto Sprite per il personaggio del
// giocatore e lo posiziona nel canvas a x=100 e y=200
_playerSprite = new Sprite(120, 120, new Point(100, 200));
// imposta una chiave utile ad identificare l'oggetto nella collection
_playerSprite.Key = "monster"
// abilita le collisioni per questo oggetto
_playerSprite.isCollisionEnabled = true;
// Aggiunge dello spritesheet del personaggio
await _playerSprite.SetSpriteSheet(new Uri(ms-appx:///Assets/Images/PlayerSpritesheet.tif), 3, 2);
// Aggiunge 2 oggetti "animazione" che servono per gestire i movimenti
// del personaggio quando è girato verso destra o verso sinistra impostando il
// comportamento REVERSE (ovvero quando l'animazione raggiunge la fine riparte al rovescio)
_playerSprite.AddAnimation("destra", 0 ,0, 2, 0, SpriteAnimation.enLoopBehaviorType.REVERSE, SpriteAnimation.enAnimationDirection.FORWARD );
_playerSprite.AddAnimation("sinistra", 0, 1, 2, 1, SpriteAnimation.enLoopBehaviorType.REVERSE, SpriteAnimation.enAnimationDirection.FORWARD );
// Aggiunge l'oggetto alla collection dell'istanza di ScrollableBackground
_gameBackground.AddSprite(_playerSprite);
return true;
}
Viene istanziato un oggetto di tipo Sprite con una grandezza di 120x120
pixel posizionato a 100 pixel dal bordo sinistro del canvas e a 200 pixel dal bordo superiore. Poi viene assegnata una chiave tramite la proprietà Key, questo serve per poter identificare univocamente questa istanza nella collection degli oggetti Sprite (per ora è la sola, ma poi arriveranno anche le altre!); viene poi impostata la proprietà che indica al gestore delle collisioni che questo oggetto può collidere con altri oggetti che hanno la questa proprietà attiva. Infine viene impostata l'immagine con lo spritesheet del personaggio e vengono aggiunte 2 animazioni.
Lo spritesheet non è altro che un'unica immagine all'interno della quale si trovano tutti i "frame" delle animazioni del personaggio; questa tecnica permette di evitare il caricamento continuo di tante piccole immagini ad ogni frame del gioco, dato che per animare il personaggio basta "spostarsi" all'interno dello spritesheet da un fotogramma all'altro. (per capire meglio questo concetto basta guardare come è fatto il file PlayerSpritesheet.tif
che si trova fra gli Assets scaricati all'inizio).
Torniamo al MainPage.xaml.cs
dove possiamo aggiungere il personaggio semplicemente richiamando il metodo appena creato. Dato però che il metodo AddPlayer
è asincrono, dobbiamo anche aggiungere la parola async alla dichiarazione del metodo OnNavigatedTo
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
// inizializza il game model
this.game = new GameModel();
// aggiunge il canvas generato dalla classe
// ScrollableBackground alla viewbox principale
this.mainViewBox.Child = this.game.GameBackgroundCanvas;
// aggiunge il personaggio principale
await this.game.AddPlayer();
}
Se a questo punto compiliamo ed eseguiamo vedremo spuntare il nostro mostriciattolo sullo schermo
Per ora il nostro gioco è un pochino... statico, non credete? Vediamo quindi come "animare" un tantino la situazione.