2012-11-17 12 views
8

Sto provando a scrivere il mio primo gioco HTML5 usando una combinazione di Canvas e l'eccellente libreria KineticJS e ho colpito un po 'un muro all'inizio.Permettere all'utente di digitare testo in un gioco Canvas HTML5

Quello che voglio fare è chiedere all'utente di inserire il proprio nome in una casella del gioco. Dopo aver fatto qualche ricerca, non riesco a vedere alcun modo di farlo al di fuori di ottenere un elemento HTML mobile su quella parte della tela che sto usando.

È corretto?

Essendo cresciuto in un sacco di giochi Flash e web, sono sicuro che ogni volta che devo inserire un nome o salvare il nome del file, è fatto direttamente nel gioco stesso e non si basa sull'HTML per generarlo?

Qualunque consiglio su come farlo sarebbe accolto con gratitudine.

+0

Io non credo che ci sia alcuna fuori della capacità di dialogo in Kinetic JS per l'aggiunta di una casella di testo. Si prega di fare riferimento alla documentazione KineticJS per lo stesso: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ Risponderà alla maggior parte delle vostre domande. È necessario creare un'area di testo nell'area di lavoro aggiungendo gestori di eventi in Tratti chiave su un rettangolo. Quindi visualizza il testo ricevuto dall'utente nell'area di disegno nel formato specifico. – Amber

+0

Che discute l'immissione di testo sulla tela, non l'acquisizione di testo da parte di un utente. Sto già usando un sacco di KineticJS Text per creare i miei pulsanti, quello che voglio è un modo di dire, per favore inserisci il tuo nome: (che userà l'attributo text) e poi catturerai il testo all'interno di una funzione JS Canvas. – Craigeve

+0

Ho appena modificato la mia risposta. Non esiste una cosa come l'area di testo HTML in Kinetic JS. – Amber

risposta

3

È possibile ottenere un elemento HTML mobile sulla parte superiore dell'area di disegno utilizzando la seguente tecnica CSS.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  • fare una posizione involucro div: relative

  • Aggiungi tela all'interno usando position: absolute

  • Aggiungi altri controlli HTML all'interno usando position: absolute

Questo applie s per tutti gli elementi HTML, non solo per la tela.

+0

Sarò onesto, sono più un programmatore Javascript/Java che HTML. Quindi in pratica ho ignorato i CSS al momento (quindi non c'è la parte