View
327
Download
3
Category
Preview:
Citation preview
Un éditeur de circuit de trainsur un canvas Html5
François Crevola - Juin 2013http://geotrain.crevola.org/
Fonctionnalités
● Inspiré par des jouets existants : Geotrax® de FisherPrice®
● Poser / prendre / déplacer / supprimer des rails sur le circuit
● Déplacement du circuit vers le haut, le bas, la gauche ou la droite (monde/carte virtuellement infinie)
● Zoom avant et arrière● Creation de nouveaux rails (fusion de rails existants)● Import / export XML
François Crevolahttp://geotrain.crevola.org/
Avant
François Crevola
● Prises de photos des circuits créés par mes enfants.
● Papier à petits carreaux 5mm x 5mm / stylo
http://geotrain.crevola.org/
Premiers essais
Drag'n drop d'images bitmap
François Crevola
Pours :
● Facile ctx.drawImage(...)
Contres :
● Se cale pas très bien (ça pourrait mais ça prendrait du temps)
● Moche (Je suis programmeur, pas artiste)
● Trop de travail pour ajouter un nouveau type de rail
● Zoom impossiblehttp://geotrain.crevola.org/
Fortuitude● Un jour, juste pour s'amuser : recherche d'un implémentation en
javascript / canvas du language de programmation logo. S'amuser avec la tortue. Dessiner « accidentellement » des rails ...
François Crevola
…. Eurêka ! Je vais utiliser des graphismes vectoriels !!
( http://www.calormen.com/logo/ )
cs repeat 4 [fd 20 rt 90 fd 20 rt 90 fd 20 rt -90]
http://geotrain.crevola.org/
Bénéfices● Rotation, symétrie, ...● Zoom (tous niveaux)
François Crevolahttp://geotrain.crevola.org/
Bénéfices● Fusion : chaque rail est un polygone, donc il
suffit de faire l'union des polygones.
François Crevola
+ =
Facile !(merci ClipperJs)
http://geotrain.crevola.org/
Optimisation
François Crevola
Utiliser 3 canvas (transparent) au lieu d' 1 :
- arrière-plan- circuit de train- avant-plan (rail en train d'être déplacé, sélection d'une zone de fusion, ….)
Permet de bénéficier des accélérations du GPU !
http://geotrain.crevola.org/
(idée venant de http://www.html5rocks.com/en/tutorials/canvas/performance/ )
Optimisation
François Crevolahttp://geotrain.crevola.org/
(en utilisant Chrome. Plus lent sous Firefox. IE est le pire ! )
Recommended