Informatica semplice

C# Windows Store - Salvare un Canvas in un'immagine

2013-12-20T06:24:00.000-08:00

Dopo giorni di prove, ricerche online, test di qualche libreria, oggi vi voglio spiegare come salvare tutto quello che inserite in un canvas, in un'immagine tramite l'utlizzo di C# e Javascript in un'applicazione per Windows Store.

Per prima cosa, apriamo visual studio e, creiamo un nuovo progetto Windows Store tramite il linguaggio C#:

Ora, apriamo il file MainPage.xaml e modifichiamolo nel modo seguente:

Spigazione: Creiamo una Barra in basso all'applicazione con due bottoni, uno per scegliere la foto e uno, per applicare l'effetto su di essa. Poi inseriamo un WebView non visibile che effettuerà la modifica della foto.

Ora apriamo MainPage.xaml.cs e inseriamo:

i seguenti using:
Le seguenti variabili:

Spiegazione: Un array di byte che contiene la foto; width e height, rispetivamente lunghezza e altezza della foto; htmlFragment è il contenuto della WebView nascosta, contiene una funzione Javascript che si occupa di applicare l'effetto voluto alla foto. In particolare: questa funzione inserisce in alto a sinistra la data e, nella metà verso destra la scritta 'Hello World'.

3. Il costruttore:

Spiegazione: Carica la pagina nella WebView

4. La funzione Folder_Click, per quando viene cliccato il primo bottone sulla BottomBar:

Spiegazione: Visualizzo la finestra per scegliere l'immagine(solo .jpg), se ne viene scelta una, controllo se c'è già un'immagine visualizzata e, la cancello, poi imposto la nuova immagine selezionata per essere visualizzata e abilito il bottone per applicare l'effetto.

5. La funzione Attach_Click, per quando viene cliccato il secondo bottone sulla BottomBar:

Spiegazione: Converto l'immagine in una stringa in base64 e la spedisco come parametro alla funzione Javascript Elaborate.

6. La funzione On_ScriptNotify, che viene richiamata dalla funzione Javascript quando finisce di
elaborare la foto:

Spiegazione: Recupero la foto elaborata, la converto in byte[], visualizzo la finestra per salvare la foto(solo .png), se è stato scelto un file, scrivo i byte[] nel file, cancello la foto visualizzata, carico quella elaborata e la visualizzo. Se non viene scelto nessun file su cui salvare, cancello la foto visualizzata e disabilito il secondo bottone sulla BottomBar.

Compiliamo ed eseguiamo. Piaciuto?

Windows Phone 8 - Creare un MessageBox Personalizzato

2013-09-06T10:02:00.000-07:00

Chi sviluppa per Windows Phone 8, si sarà accorto che la classe MessageBox da la possibilità di creare finestre di popup con due semplici bottoni: OK, Cancel. Oggi vediamo come ampliare questa funzione, creando una finestra di popup tutta nostra.

Per prima cosa apriamo Visual Studio 2012 e creiamo un nuovo progetto C# per Windows Phone 8, dopodiché creiamo una nuova cartella all'interno della soluzione e la chiamiamo CustomMessageBox. La soluzione finale sarà così:

All'interno di questa cartella creiamo un nuovo file in questo modo:

Partiamo dalla grafica, quindi modifichiamo il file CustomMessageBox.xaml in questo modo:

Spiegazione: Inseriamo nel LayoutRoot tre righe che contengono il Titolo il Contenuto e l'ultima i Bottoni

Ora andiamo ad aprire il file CustomMessageBox.xaml.cs e aggiungiamo i seguenti using:

Poi questi due enumeratori:

Spiegazione: L'enum CustomMessageBoxButtonType dice quali tipi di bottoni il popup supporta. Il CustomMessageBoxButtonResult definisce i risultati che i bottoni restituiscono al click.

Inseriamo la variabile Result:

Spiegazione: Questa variabile restituisce il valore del bottone cliccato.

Andiamo ad aggiungere 3 tipi di costruttori:

Spiegazione: Ovviamente differiscono per il numero di parametri passati, se si chiama il primo, viene costruita una finestra con i valori di default e con un bottone OK. Con il secondo definiamo il Titolo e il Contenuto della finestra, ma il bottone è sempre quello di default. Infine con l'ultimo creiamo un popup con tutti i parametri personalizzati!

Passiamo alla funzione CreateButton che si occupa di aggiungere i bottoni al popup:

Spiegazione: A seconda del tipo di bottone, impostiamo il testo da visualizzare(Content) e al Click il tipo di valore da restituire, infine lo aggiungiamo all'utlima riga del popup.

L'ultima funzione che ci serve, è quella che controlla quando un bottone viene cliccato:

Spiegazione: Questa funzione lavora su un Thread secondario, di modo che possiamo aggiungere una keyword await quando la richiamiamo ed attendere il termine della funzione. La funzione non fa altro che controllare la variabile Result, appena cambia il valore da Null ad uno impostato dal bottone cliccato, la restituisce come risultato.

Utilizzo:
Passiamo a modificare il file MainPage.xaml:

Spiegazione: Abbiamo aggiunto(xmlns:local="clr-namespace:PhoneApp2.CustomMessageBox")lo spazione dei nomi per creare il popup. Abbiamo creato un bottone che al click visualizza il popup. In fondo al LayoutRoot abbiamo aggiunto un Canvas che sarà lo sfondo che oscura tutto tranne il popup.

Passiamo al MainPage.xaml.cs:

Spiegazione: La funzione ShowPopup crea un primo MessageBox chiedendo di cliccare su Sì o No, a seconda di dove si clicca viene visualizzato un nuovo popup con il risultato!

Ed ecco il risultato:

Windows 8 - Creare una macchina virtuale con Hyper-v

2013-07-07T07:20:00.001-07:00

Oggi voglio spiegare a tutti quelli che come me si sono battuti in Hyper-v per la prima volta, come utilizzarlo per creare una macchina virtuale.

Per prima cosa, apriamo Hyper-v:

Clicchiamo su Action -> New -> Virtual Machine...

Clicchiamo su Next >

Diamo un nome alla macchina e clicchiamo su Next >

Assegniamo la RAM iniziale e clicchiamo su Next >

Spiegazione: Se è la prima macchina che create, per assegnare la memoria RAM consiglio questo metodo [(RAM totale del PC)/2]-148

Esempio: Se la RAM totale è 4GB: (4096MB/2)-148MB=1900MB

Nella nuova finestra clicchiamo su Next >

Impostiamo un nome, locazione e dimensione al nostro hard-disk virtuale e clicchiamo su Next >

Nella nuova finestra clicchiamo su Next >

Clicchiamo su Finish:

Terminato il processo di creazione, selezioniamo la nostra macchina:

E clicchiamo su Action -> Settings...

Nella nuova finestra clicchiamo su Memory:

Spiegazione: Settaggio di Minimun RAM e Maximun RAM, al Minimun RAM diamo la memoria totale della macchina virtuale, mentre a Maximun RAM gli assegniamo (Memoria totale macchina virtuale+148)

Esempio: 1900MB+148MB=2048MB

Clicchiamo su Apply.
Ora clicchiamo su Processor, se avete un PC con un singolo processore potete saltare questa parte, impostiamo Number of virtual processor con la metà dei processori disponibili:

Esempio: Se il PC ha 4 processori: 4/2=2

Clicchiamo su Apply.
Clicchiamo su OK.

Adesso passiamo ad un argomento un po più complicato, la gestione della rete in Hyper-v. Tale programma, ha dei problemi nel virtualizzare le schede wi-fi, praticamente non le virtualizza per nulla, quindi se avete un PC con connesione wi-fi, dovrete cambiare un po di impostazioni.

Selezionate il vostro server:

Cliccate su Action -> Virtual Switch Manager...,

Clicchiamo su New virtual network switch, poi su External ed infine su Create virtual switch:

Spiegazione: Diamo un nome alla scheda, nel menù a discesa invece selezioniamo la nostra scheda wi-fi

Clicchiamo su Apply e poi su OK.

Torniamo nelle impostazioni sella macchina:

Nella nuova finestra andiamo su Network Adapter e dal menù a tendina selezioniamo la rete che abbiamo appena creato:

Clicchiamo su Apply e poi su OK.

Ora scegliamo una distribuzione Linux da installare sulla macchina, io personalmente ho scelto una Ubuntu 13.04 a 32 bit scaricabile da qui

Scaricata la distribuzione, riapriamo le Impostazione della macchina virtuale:

Impostiamo il percorso della nostra immagine .iso e clicchiamo su Apply e poi su OK.

Ora possiamo avviare la nostra macchina virtuale.

Selezioniamo la nostra macchina:

Clicchiamo su Action -> Connect...

Nella nuova finestra clicchiamo sul bottone blu:

Terminato l'avvio, selezioniamo la nostra lingua e clicchiamo su Try Ubuntu:

Avviato il desktop, clicchiamo su questo bottone:

Iniziamo a scrivere network e clicchiamo su questa icona:

Selezioniamo la nostra connesione eth0 e clicchiamo su Edit...

Andiamo nella scheda IPV6 Settings e a Method mettiamo Ignore:

Andiamo nella scheda IPV4 Settings a Method mettiamo Manual, clicchiamo su Add e inseriamo un Address, Prefix, Gateway. Poi inseriamo un DNS servers:

Infine clicchiamo su Save...

Aspettiamo che Ubuntu prova a riconnettersi, se tutti i parametri sono impostati, nella barra vedremo questa icona:

Adesso possiamo collegarci ad internet, clicchiamo sull'icona di installazione di Ubuntu:

Con questo, si conclude questo tutorial su come creare una macchina virtuale con Hyper-v. Presto altre implementazioni!

Animare un'immagine PNG con Javascript

2013-05-22T06:51:00.003-07:00

Oggi voglio spiegarvi come animare un file PNG, con all'interno una sequenza di immagini, tramite Javascript in tre diversi contesti:

Web
Windows 8
Windows Phone

Prima di iniziare, bisogna procurarci l'immagine da animare, io ne creerò una con GIMP:

WEB

Per la prova web creiamo una cartella in una qualsiasi posizione, all'interno mettiamo la nostra immagine, un nuovo file style.css, un file anim.js e un file index.html. Apriamo style.css ed inseriamo le seguenti righe:

Spiegazione: Creiamo un nuovo stile per l'elemento square di altezza e larghezza 40px con immagine di sfondo square.png e senza ripetizione.

Apriamo il file anim.js ed inseriamo:

Spiegazione: Creiamo una funzione che genera un oggetto Square con le proprietà descritte.

Infine apriamo il file index.html:

Spiegazione: Creiamo un oggetto square con 40px di altezza e 40px di larghezza, 8 frames, e il nome dell'elemento html nel quale andare a disegnare. La funzione scroll si occupa di scorrere l'immagine di sfondo dell'elemento html e di alzarla di 40px finché non arriva in fondo, per ricominciare da capo. La funzione init effettua una prima animazione, poi setta un timer che esegue la scroll ogni 100 millisecondi.

Adesso clicchiamo due volte sul file index.html per vederne gli effetti.

Piaciuto?

WINDOWS 8

Per la prova in Windows 8, non facciamo altro che creare un nuovo progetto HTML5/Javascript da Visual Studio, importare l'immagine e il file anim.js nel progetto, modificare il file default.css aggiungendo le righe del file style.css e modificare il file default.html aggiungendo le righe del file index.html.

Progetto completo con le importazioni

default.css modificato

default.html modificato

Eseguiamolo per ottenere lo stesso risultato della pagina web.

WINDOWS PHONE 8

Creiamo un progetto HTML5/Javascript per Windows Phone 8 da Visual Studio, consiglio di utilizzare quello creato tramite questi due articoli:

Creiamo la cartella images, importiamo l'immagine del quadrato, modifichiamo il file default.css, default.html e default.js.

Progetto creato con le importazioni corrette

default.css modificato correttamente

default.js modificato correttamente

default.html modificato correttamente

Eseguiamo.

Presto molte altre implementazioni di questo tipo di codice, anche per la creazione di Spitesheet per il motore grafico qui descritto

Windows 8 - Creare uno slider JQuery-UI senza l'utilizzo di tale libreria con HTML5/Javascript

2013-05-16T01:11:00.001-07:00

In questi giorni mi sono trovato a risolvere un problema di compatibilità tra JQuery 2.0, JQuery-UI 1.10.3 e Windows 8 per la creazione di uno Slider, oggi voglio pubblicare la mia soluzione di modo che spero di aiutare qualcun'altro che potrebbe trovarsi in questa spiacevole situazione.
Iniziamo creando un progetto Windows Store con HTML5/Javascript, poi apriamo il Solution Explorer ed apriamo il file default.html modificandolo in questo modo:

Spiegazione: Nel body inseriamo un input di type=range che ci permetterà di creare lo slider, gli impostiamo un id per poterlo recuperare da js ed assegnarli uno style nel css ed infine alcuni attributi:

value: è il valore iniziale dello slider, non può essere minore dell'attributo min;
min: è il valore più piccolo che lo slider può assumere;
max: è il valore più grande che lo slider può assumere;
step: è il grado di spostamento della barra, cioè di quanto va incrementata o decrementata quando un utente ne cambia il valore;
onchage: è l'handler che si occupa di gestire il cambiamento del valore dello slider.

Ora apriamo il file default.js ed aggiungiamo la seguente funzione:

Spiegazione: Ogni volta che l'utente incrementa o decrementa lo slider, controlliamo se abbiamo già creato un timer, se sì lo eliminiamo, altrimenti ne creiamo uno nuovo che eseguirà onSliderApply dopo 250 millisecondi.

Sempre nel default.js aggiungiamo la onSliderApply:

Spiegazione: Visualizziamo un messaggio con il valore assunto dallo slider ed elimino il timer per evitare che tale messaggio venga visualizzato più volte.

Infine apriamo il file default.css ed aggiungiamo uno style allo slider:

Spiegazione: Nello #slider impostiamo la larghezza e la posizione all'interno della finestra. Nello #slider::-ms-fill-lower invece cambiamo il colore della barra.

Salviamo ed eseguiamo.

Piaciuto?

Con questa piccola tecnica abbiamo riprodotto lo stesso slider che ci viene fornito con JQuery-UI, ma essendo tutto nativo, abbiamo eliminato i problemi di compatibilità.

Windows Phone - leggere e scrivere file con HTML5/Javascript senza PhoneGap

2013-05-14T00:09:00.000-07:00

Riprendiamo da questo articolo parlando di come leggere e scrivere su un file(non Embedded Resource), con HTML5/Javascript.
Partiamo andando nel Solution Explorer ed aprendo il file .cs del secondo progetto creato:

E Modifichiamo la nostra funzione ReadResourceAsync in questo modo:

Spiegazione: Prendiamo il percorso di salvataggio per l'applicazione corrente, controlliamo se il file esiste restituendone il contenuto, altrimenti restituiamo una stringa vuota.

Ed aggiungiamo due nuove funzioni:

Spiegazione: Recuperiamo il percorso di salvataggio per l'applicazione corrente, apriamo o creiamo il file e ci scriviamo il contenuto.

Torniamo nel Solution Explorer ed apriamo il file default.css aggiungendo queste righe:

Spiegazione: Servono per ingrandire la viewport dell'applicazione ed eliminare l'effetto di essere a navigare dentro un webbrowser.

Commentiamo la riga -ms-touch-action: none;
Andiamo nel Solution Explorer ed apriamo il file MainPage.xaml.cs:

E modifichiamo la funzione HTML_JS:

Spiegazione: Controlliamo il tipo di operazione, se è una Load, proviamo a leggere il file Prova.txt, se è una Save proviamo a salvare il file Prova.txt.

Ora, dal Solution Explorer, apriamo il file default.js ed aggiungiamo questa funzione:

Spiegazione: Restituisce il testo che abbiamo appena scritto.

Infine apriamo il file default.html, dal Solution Explorer, e modifichiamolo in questo modo:

Spiegazione: Creiamo una textarea che ci permette di inserire del nuovo testo ed un bottone Salva che ci permette il salvataggio all'interno del file Prova.txt

Salviamo ed Eseguiamo.

Piaciuto?

Ricapitoliamo: La parte importante è:

La stringa Save~text~Prova.txt che sono il Comando, l'id dell'elemento dove recuperare il testo scritto ed il file dove andare a scrivere.

Se modifichiamo questa stringa, dovremmo andare assolutamente a modificare la funzione HTML_JS:

string result=await PhoneClassLibrary1.Read.GetFileText("Prova.txt") se modifichiamo il file da scrivere/leggere
string[] lines=e.Value.Split('~') se modifichiamo il separatore
if(e.Value.Contains("Save")) se modifichiamo il comando per il salvataggio

Anche per oggi è tutto, presto nuove modifiche a questa libreria!

Windows Phone - leggere Embedded Resource con HTML5/Javascript senza PhoneGap

2013-05-08T01:50:00.000-07:00

In questo articolo spiegherò come includere file in un progetto ed leggerli durante l'esecuzione senza l'utilizzo del framework PhoneGap. Come ben sapete, HTML e Javascript, normalmente non hanno accesso alla modifica dei file sul computer dell'utente,

in windows 8 sono state aggiunte un paio di funzioni che permettono questo, ma in windows phone?

Per iniziare creiamo un progetto windows phone 8 con HTML5/Javascript (vanno benissimo i due articoli che ho scritto: post1 post2). Nel Solution Explorer apriamo il file default.html che si trova nella cartella html e aggiungiamo questa riga:

<div id="text"></div>

Adesso, torniamo al Solution Explorer ed clicchiamo con il tasto destro sulla soluzione del progetto:

Andiamo su Aggiungi e clicchiamo su Nuovo Progetto...

Nella nuova finestra andiamo su Visual C# -> Windows Phone -> Windows Phone Class Library:

Diamo un Nome e clicchiamo su OK. In Questa finestra:

Clicchiamo su OK. Attendiamo la fine della creazione del nuovo progetto, dopodiché, andiamo nel Solution Explorer e clicchiamo con il destro sul file Class1.cs nel nuovo progetto creato e Rinominiamolo:

Scegliamo un nuovo nome, ad esempio Read.cs, diamo Invio e rispondiamo Si alla finestra che si presenta, infine lo apriamo. La prima modifica che andremo a fare è aggiungere un sealed alla classe:

Con questa modifica, evitiamo che la classe venga ereditata

Ora aggiungiamo un paio di using:

using System.IO;

using System.Reflection;

using System.Threading.Tasks;

ed creiamo questa funzione:

static async Task<string> ReadResourceAsync(Assembly assembly, string resource)

{

string xml;

using (var stream = assembly.GetManifestResourceStream(resource))

{

using (var reader = new StreamReader(stream))

{

xml = await reader.ReadToEndAsync();

}

return xml;

}

Questa funzione serve ad leggere un file dalle risorse dell'applicazione. Adesso vediamo come richiamarla, aggiungiamo un'altra using:

using Windows.Foundation;

e questa nuova funzione:

public static IAsyncOperation<string> GetFileText(string fileName)

{

return (ReadResourceAsync(typeof(Read).GetTypeInfo().Assembly,

fileName)).AsAsyncOperation<string>();

}

A livello di codice C#, abbiamo terminato, adesso aggiungiamo un file che andremo a leggere; va benissimo un qualsiasi file di testo. Per inserirlo andiamo nel Solution Explorer e sempre dentro a questo nuovo progetto clicchiamo con il destro ed andiamo su Aggiungi -> Nuova cartella:

Chiamiamola Files. Clicchiamo con il destro su questa cartella ed andiamo su Aggiungi; adesso, se vogliamo inserire un nuovo elemento clicchiamo su Nuovo elemento..., altrimenti clicchiamo su Elemento esistente..., noi creeremo un nuovo elemento, un file txt che chiameremo Prova.txt ed ci inseriremo questo testo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Andiamo nel Solution Explorer e clicchiamo con il destro sul nuovo file txt scegliento Proprietà:

E cambiamo la Build Action in Embedded Resource:

Sempre nel Solution Explorer clicchiamo con il destro sul progetto principale scegliendo Aggiungi referenza...

Nella nuova finestra selezioniamo Soluzione -> Progetto e spuntiamo dall'elenco il progetto che abbiamo creato ed infine clicchiamo su OK.

Andiamo nel Solution Explorer ed apriamo il file default.js che si trova nella cartella js e modifichiamo la funzione onLoad in questo modo:

Spiegazione: Cambiamo il tipo di notifica da inviare al C#

Torniamo nel Solution Explorer ed apriamo il file MainPage.xaml.cs:

Modifichiamo la funzione HTML_JS:

Spiegazione: Leggiamo il messaggio, se è un Load, vuol dire che dobbiamo leggere il file

Ora torniamo nel default.js ed aggiungiamo questa nuova funzione:

Spiegazione: inserisco il testo letto nell'elemento div di id text

Per finire, andiamo nel Solution Explorer ed apriamo il file default.css modificandolo in questo modo:

Salviamo ed eseguiamo. Ultimo consiglio, se il testo è troppo lungo e non riusciamo a leggerlo, basta eliminare la riga:

-ms-touch-action: none;

dal file default.css.
Anche per oggi è tutto, al prossimo articolo!

Giochi per Windows Phone - Pratica con FPS

2013-05-07T01:27:00.001-07:00

Oggi, vedremo il funzionamento degli FPS, riprendiamo il progetto del cubo, apporteremo qualche modifica. Andiamo nel Solution Explorer ed apriamo il file default.js che si trova nella cartella js, andremo a modificare:

l'oggetto box: aggiungento due campi tox, toy che sono rispettivamente la x e la y in cui si deve dirigere il cubo.

Cosa cambia?

Cambia il modo in cui il cubo viene spostato, invece di andare direttamente alla destinazione, in ogni FPS il cubo si muoverà di 1px. In questo modo vedremo come si comporta il motore grafico al cambiare degli FPS. Elenchiamo le modifiche:

Riscriviamo il box:
Modifichiamo la funzione onClick:
E la onDraw:

Spiegazione:

tox e toy sono le coordinate in cui ci vogliamo spostare. Nella onClick abbiamo eliminato le righe che assegnavano la nuova posizione alla x e y dell'oggetto box. In onDraw abbiamo aggiunto 4 righe che controllano la posizione del box rispetto alla destinazione con aggiornamento della posizione corrente(x e y).

Salvando ed eseguendo, otterremo già un ottimo risultato, da notare: clicchiamo ripetutamente con il mouse il box cambierà in automatico la sua destinazione. Adesso giochiamo un po con l'FPS:

Cambiamo la variabile FPS da 30 a 5 e proviamo ad rieseguire il gioco: il box è molto più lento negli spostamenti.
Adesso proviamo a portarlo ad un valore conosciuto dagli appassionati di giochi, tra 50 e 60: l'effetto non è per niente male.

Ovviamente questa è una scelta voluta, perché la funzione onDraw(che aggiorna lo spostamento del box), viene chiamata nel gameLoop che a sua volta viene richiamato ogni 1000/FPS millisecondi. Con questa struttura modifichiamo la velocità di spostamento del cubo.
Anche per oggi è tutto sui giochi, appuntamento al prossimo post con molte altre modifiche sul motore grafico!

Giochi per Windows - Pratica su Windows Phone

2013-05-03T02:42:00.000-07:00

Oggi, vedremo come costruire il nostro primo motore grafico! Per prima cosa, avviamo Visual Studio e apriamo il progetto che abbiamo creato in questi due articoli: Parte 1 Parte 2. Nel'articolo sulla teoria di un gioco, ho detto che un motore grafico, è strutturato in un Caricamento delle risorse ed un ciclo infinito. Andiamo ad vedere come caricare le risorse.
Nel Solution Explorer di Visual Studio clicchiamo due volte sul file default.js che si trova nella cartella js. La funzione onLoad fa al caso nostro, perché è la prima funzione ad essere eseguita appena la pagina viene caricata. In questo tutorial non caricheremo delle risorse specifiche, ma andremo ad cambiare lo sfondo di Background ed a disegnare un quadrato, che verrà spostato sullo schermo, ecco come fare:

Facciamo un po di chiarezza, su quello che abbiamo scritto:

document.body.setAttribute('style', 'background-color:#00c0ff'): Questa riga serve a cambiare lo sfondo della pagina.
var div = document.createElement('div'): creiamo un nuovo elemento HTML div.
div.setAttribute('id', 'box'): diamo un id univoco all'elemento, per poterlo richiamare dal codice Javascript.
div.setAttribute('style', 'position:absolute;width:20px;height:20px;top:10px;left:10px;border:1px solid #000;background-color:#00ff60'): Definiamo uno stile CSS per questo nuovo elemento.
document.body.appendChild(div): Inseriamo questo nuovo div all'interno della pagina, come figlio del body.

In questo caso, noi abbiamo caricato(costruito)le nostre risorse, adesso dobbiamo entrare nel ciclo infinito:

var FPS = 30: Abbiamo definito la nostra unità di misura, vogliamo che ogni secondo vengano riprodotti 30 fotogrammi, come inizio non è male.
setInterval(gameLoop, 1000 / FPS): Avviamo il nostro ciclo. 1000/FPS serve a calcolare quante volte in un secondo deve essere eseguita la funzione gameLoop, se dentro di essa chiamiamo una funzione che ridisegna l'interfaccia, abbiamo la nostra animazione a 30 fotogrammi al secondo.
function gameLoop() {}: è il vero e proprio ciclo del gioco.

Siccome che l'oggetto che andremo a spostare è un cubo, direi di creare un oggetto box:

x e y sono la posizione in cui si trova il cubo.
w e h sono rispettivamente la lunghezza e l'altezza del cubo.

Aggiungiamo una funzione onClick:

Che non fa altro che ricavare le coordinate dell'ultimo punto cliccato e salvare nell'oggetto box.

La funzione la richiamiamo tramite l'istruzione window.document.onclick = onClick; inserita nella funzione onLoad:

Basta richiamarla una volta sola prima del nostro ciclo. Questo perché sovrascriviamo un handler nell'evento onclick del documento, quindi l'ascolto di un nuovo click viene effettuato direttamente da javascript, a noi rimane solo il compito di aggiornare il nostro oggetto box. Ovviamente, se avviamo il nostro progetto in questo momento, non vedremo spostare un bel niente, questo perché non ci siamo ancora preoccupati di aggiornare la nostra finestra, ed è quello che andremo a fare. Creiamo una funzione onDraw:

che richiameremo dentro al nostro ciclo:

L'ultima modifica da effettuare è cambiare la riga:

div.setAttribute('style', 'position:absolute;width:20px;height:20px;top:10px;left:10px;border:1px solid #000;background-color:#00ff60');

dentro la funzione onLoad con questa:

div.setAttribute('style', 'position:absolute;width:' + box.w + 'px;height:' + box.h + 'px;top:' + box.x + 'px;left:' + box.y + 'px;border:1px solid #000;background-color:#00ff60');

di modo che, basta cambiare la x, y, w e h dell'oggetto box per rendere subito effettive le modifiche fin dall'inizio. Prima di eseguire, dal Solution Explorer apriamo il file default.html che si trova nella cartella html ed cancelliamo questa riga:

<h1>page name</h1>

Così avremo tutto lo schermo a nostra a disposizione, per sbizzarrirci a muovere il nostro cubo. Salviamo

ed eseguiamo

Per ora, buon divertimento. Presto qualche nuova modifica, per ampliare il motore grafico!

Giochi per Windows - Un po di teoria

2013-05-02T07:39:00.001-07:00

Scommetto che chiunque, alla domanda:

Ti piacerebbe sviluppare un gioco?

Risponderebbe sì, ma poi sotto sotto non ha le basi per poter partire, oggi voglio dare un po di teoria e in un futuro qualche esempio su come creare dei giochi (grazie ad HTML5/Javascript). So che per qualcuno di voi è una noia mortale, ma purtroppo bisogna partire da un po di teoria, sarò sbrigativo.
Per prima cosa:

Cos'è un motore grafico?

Diciamo che è il nucleo di un gioco (un kernel per intendersi) , senza di esso un gioco non esiste e, quindi tutto ruota intorno ad esso. Sia i giochi più moderni, che i classici di un tempo, hanno alla base un motore grafico.

Come funziona un motore grafico?

Bé, oggi giorno i motori grafici sono piuttosto complessi, comunque più o meno hanno tutti alla base questo concetto:

Caricamento delle risorse
Loop infinito

Caricamento delle risorse: In questa fase, vengono caricate tutte o parte delle risorse per poter eseguire il gioco.

Loop infinito: Questa fase è un po più complicata, dentro questo ciclo, che si ripete finché il gioco non viene chiuso o messo in pausa, vengono effettuati, tutti i controlli, calcoli, ecc. e il ridisegno dell'interfaccia, il cosiddetto rendering.

Cos'è il rendering?

E' il processo che serve ad ridisegnare l'interfaccia del gioco, più precisamente a riprodurre un'animazione. Questo processo si misura in FPS.

Cos'è un FPS?

Un FPS (o Frame Per Secondo) è un'unità di misura per calcolare quanti fotogrammi devono essere riprodotti in un secondo. Ovviamente, più fotogrammi riprodotti, più l'animazione sarà realistica, questo comporta anche un maggior peso di calcolo, quindi la cosa deve essere bilanciata.
Nel prossimo articolo, vedremo come scrivere un piccolo motore grafico di base.

Windows Phone 8 e javascript - Parte 2

2013-05-02T02:40:00.003-07:00

In questa seconda parte, vedremo come ampliare il nostro piccolo progetto. Con la prima parte, avevamo visto come creare una pagina con scritto page name. Per prima cosa, riprendiamo dalla pagina MainPage.xaml, più precisamente, dal tag

Andremo ad aggiungere dei nuovi attributi:

x:Name: Questo attributo serve a dare un nome al nostro tag. Più precisamente, serve a creare un'istanza del componente, da poter utilizzare nel codice C#. Non preoccupatevi, più avanti vedremo cosa vuol dire.
IsScriptEnabled: Questo attributo, se impostato a true, abilita l'esecuzione degli Script Javascript nella pagina html.
ScriptNotify: Questo attributo serve ad creare una funzione, per far comunicare il Web Browser con il C#. Anche in questo caso, più avanti vedremo come.

Quindi il nostro tag diventerà così

Ora passiamo a vedere un po di codice C#, niente paura, vedremo solo il meccanismo di comunicazione tra il Web Brower e la nostra funzione HTML_JS definita nell'attributo ScriptNotify. Apriamo il Solution Explorer e clicchiamo due volte con il sinistro sopra il file MainPage.xaml.cs:

Prima di iniziare, puliamo un po il codice, eliminando queste parti:

Alla fine il codice sarà più o meno questo:

Adesso, adiamo a scrivere la nostra funzione HTML_JS:

La funzione inserita, non fa altro che stampare un messaggio, con il testo inviato dal Web Browser.

Come facciamo ad impostare il testo?

Apriamo il Solution Explorer e clicchiamo due volte con il sinistro sul file default.js che si trova nella cartella js. Nella Parte 1, avevamo creato una funzione vuota chiamata onLoad(), modifichiamo la funzione in questo modo:

Salviamo il tutto:

ed eseguiamo:

Se tutto è andato a buon fine, vedremo un messaggio con il testo che abbiamo impostato, carino no?

Per questa seconda parte è tutto. Nei prossimi articoli vedremo come creare semplici applicazioni partendo da questo template.

Windows Phone 8 e javascript - Parte 1

2013-05-01T03:40:00.001-07:00

Navigando nel web ho trovato molte domande sulla convivenza di Windows phone e Javascript, la mia risposta è sempre la stessa:

"Si, è possibile creare applicazioni Windows Phone basate su HTML5 e Javascript"

Oggi voglio far capire come sia possibile farlo. Chi non è alle prime armi, potrebbe rispondermi:

"Visual Studio dispone già di un Project Template HTML5/Javascript per Windows Phone"

Questa cosa è vera, però è interessante capire come funziona la cosa, e creare un template pulito da codice che magari non useremo mai.

NOTA BENE: Per sviluppare su Windows Phone 8, hai bisogno di un PC con Windows 8 e Visual Studio 2012.

Prima di tutto, apriamo il nostro Visual Studio e clicchiamo su File -> Nuovo -> Progetto...

Nella finestra che si apre selezioniamo Visual C# -> Windows Phone -> Windows Phone App

Inseriamo un Nome e il Percorso di salvataggio e clicchiamo su OK. In questa ultima finestra, lasciamo tutto così com'è e clicchiamo su OK.

Attendiamo che il progetto venga creato, finito il caricamento, ci verrà presentata una schermata simile a questa:

Concentriamoci sulla parte destra, quella del codice, apporteremo qualche modifica. Prima di tutto modifichiamo queste righe:

Cancelliamo completamente questa parte di codice:

Ed anche questa:

Infine, eliminiamo questa ultima parte:

Ora modifichiamo queste linee di codice:

Fatte tutte queste operazioni, il risultato dovrebbe essere simile a questo:

Fino ad ora, non abbiamo fatto altro che creare una griglia con una riga, che occupa tutto lo schermo. Javascript e l'HTML 5, funzionano all'interno di pagine web, quindi il prossimo passo sarà quello di inserire un Web Browser all'interno della riga, dove, all'interno di esso verrà visualizzata la nostra applicazione. Modifichiamo questa riga:

Così avremmo aggiunto il nostro Web Browser. Ora andremo a creare un po di cartelle per dare una struttura al nostro progetto. Apriamo il Solution Explorer

Selezioniamo il nostro progetto

Clicchiamo con il tasto destro su di esso e selezioniamo Aggiungi -> Nuova cartella

Le cartelle da creare con questo procedimento sono:

css
html
js

Creata la prima struttura, sempre dal Solution Explorer creiamo un nuovo file dentro la cartella css

Nella finestra che si apre, selezioniamo File di Testo, nel campo nome inseriamo default.css e clicchiamo su Aggiungi

Modifichiamo il file css, inserendo queste righe

La riga nuova per tutti è la seguente:

-ms-touch-action: none; Con questa riga, disabilitiamo lo scroll all'interno del Web Browser, nascondendo agli utenti, il fatto di essere a navigare una pagina web e rendendo l'applicazione più nativa.

Adesso torniamo nel Solution Explorer, clicchiamo con il destro sulla cartella html e selezioniamo Aggiungi -> Nuovo elemento... Questa volta nella finestra selezioniamo File di Testo e come nome diamo default.html. In questo nuovo file aggiungiamo le seguenti righe:

Semplicemente, sono tag HTML. Torniamo al Solution Explorer, clicchiamo con il destro sulla cartella js, selezioniamo Aggiungi -> Nuovo Elemento... Nella finestra selezioniamo File di Testo e come nome diamo default.js. Aggiungiamo le seguenti righe al nuovo file:

Torniamo nella pagina MainPage.xaml, Al nuvo tag inserito in precedenza (quello del Web Browser), dovremmo aggiungere dei nuovi attributi, ecco una breve spiegazione:

Source: questo attributo richiede il percorso del file html da visualizzare, quindi noti inseriremo il percorso del file default.html

Salviamo tutto

e proviamo ad eseguire

Continua con la Parte 2