Avete fatto bene a scegliere Construct 2! Comiciamo a fare il vostro primo gioco in HTML5. Faremo una demo di "Ghost Shooter" Potete provarlo qui . Prima vediamo cosa vogliamo ottenere: un personaggio che guarda il mouse, si muove con le frecce della tasiera e spara ai mostri con il mouse. Imparerete tutto quello che c'e' da sapere per fare un gioco semplice, dai layers al sistema di eventi!
Nota: per cortesia non chiedete aiuto nei commenti di questo tutorial! Invece, dirigetevi verso il forum per avere la miglior risposta possibile su qualsiasi domanda abbiate
Tutorial alternativi
C'e' una guida per principianti alternativa: Come fare un platform, che punta al fare un platform del tipo salta-e-corri, invece che uno shooter dall'alto al basso. Potete cominciare con qualsiasi dei tutorial, ma vi consigliamo di completarli entrambi per avere una buona idea su come fare entrambi i tipi di gioco.
C'e' anche Come fare un clone di Asteroids con meno di 100 eventi di Kyatric, leggermente piu' avanzato, ma anche molto dettagliato.
Installazione di Construct 2
Se ancora non lo avete fatto, potete scaricare gratuitamente una copia di Construct2 a questo indirizzo. Construct2 può essere utilizzato solo su sistema operativo Windows, ma i vostri giochi potranno girare tu tutte le piattaforma (MAC, Linux, iPhone, iPad, Android…). Potete anche installare Construct2 su una chiave USB e utilizzarlo su qualsiasi postazione volete.
I primi passi
Ora siete pronti. Lanciate Construct2, cliccate il pulsante File e selezionate New.
Nella finestra New Project non avrete niente da cambiare Cliccate su Create project. Construct 2 salverà l’intero progetto in un file .capx. A questo punto dovreste star osservando un layout vuoto, ovvero la schermata dove creerete e posizionerete gli oggetti. Pensate al layout come il livello di un gioco o lo schermo di un meno. In altri programmi il layout viene chiamato room, scene o frame
Inserire oggetti
Il tiled background
La prima cosa di abbiamo bisogno è uno sfondo che si ripeta all’interno del layout. L’oggetto Tiled Background è proprio quello che ci serve. Prima di tutto ecco l'immagine che utilizzeremo come background; cliccate col tasto destro del mouse e salvatela sul vostro computer da qualche parte:
Adesso, doppio click in un punto qualsiasi del layout per inserire un oggetto (più tardi, se il layout dovesse essere pieno, potete anche premere il tasto destro e selezionare Insert new object). Vi si aprirà la pagina Insert new object e potrete fare doppio click su Tiled Background per aggiungerne uno al vostro layout.
Un mirino apparirà per indicarvi dove andrà piazzato l’oggetto. Cliccare in un punto qualsiasi al centro del layout. Vi si aprira la Texture Editor per farvi inserire la texture nei tile. Cliccate l’icona della cartella e caricate l’immagine di background scaricata precedentemente.
Chiudete la Texture Editor cliccando sulla X in alto a destra. Se vi viene chiesto, assicuratevi di aver salvato! Adesso dovreste vedere il vostro Tiled Background ripetuto nel layout. Ridimensionatelo in modo che copra l’intero layout. Assicuratevi di averlo selezionato e da Proprieties Bar sulla sinistra potrete vedere tutte le impostazioni del vostro oggetto, incluse dimensioni e posizionamento. Settate la posizione su 0,0 (in alto a sinistra del layout) e dimensionatelo a 1280, 1024 px (la dimensione del layout).
Diamo un’occhiata al nostro lavoro. Premete control e scorrete la rotella dal mouse verso il basso per fare uno zoom out. In alternativa, cliccate view - zoom out un paio di volte. Potete anche tener premuto spazio o il tasto centrale del mouse per muovervi in giro. Carino, no? Il vostro tiled background dovrebbe coprire l'intero layout adesso:
Premete control+0 o cliccate view - zoom to 100% per tornare ad una vista 1:1.
(se siete impazienti come me, cliccate la piccola iconcina 'run' nella barra del titolo sulla finestra - dovrebbe comparire il vostro browser facendovi mostrare il vostro layout con il background! Woo!)