Forums Développement Multimédia

Aller au contenu

Un nouveau moteur 2d flash like avec canvas

en fait cest le mien ... CODE HTML5

27 réponses à ce sujet

#1 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 20 December 2013 - 17:03 PM

Bonjour à tous,

Voilà depuis quelques temps j'anime une formation chez mediabox qui consiste à apprendre aux stagiaires à créer un moteur 2d basé sur l'API canvas ( 2d seulement ) de la spec HTML5.

Il se trouve que j'ai fait en sorte que ce moteur soit construit sur le modèle de flash ( comprendre par là j'ai réutilisé aux maximum les noms de fonctions, de classe etc ).

Pour l'instant quelques petites remarques notables:

- Il doit rester quelques petits bugs sur les InputText que je suis en train de corriger à l'heure actuelle
- Il me reste à implémenter les mask sur les DisplayObject
- Ma classe DisplayObjectContainer est instanciable ( contrairement à celle de flash ) et peut contenir directement des enfants.

le lien vers le code source est ici: https://github.com/t...master/tomahawk
Je le mettrai bien sur à jour régulièrement, en fait nous sommes 2 à bosser dessus chez The Tiny Spark ( le collectif de freelance que nous avons monté avec ma femme Céline adresse )

Voilà, n'hésitez pas à l'essayer et à nous faire des retours pour l'améliorer, ou à l'améliorer vous-même ( il est fait pour ça ). Vous pouvez écrire les retours ici-même ou nous envoyer un mail à contact@the-tiny-spark.com

Un ebook retraçant les étapes de bases de la construction du moteur sera bientot disponible en ligne, même si rien ne vaux une formation en présentielle dans les centres mediabox ;).

Bonne journée à tous et bons tests !

Thoutmosis - Nico
http://the-tiny-spark.com

#2 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 20 December 2013 - 18:54 PM

Salut,
Intéressant tout ça, mais quel avantage par rapport à CreateJS, qui s'inspire déjà ENORMEMENT des classes de base de l'AS3 et qui a le gros avantage d'être compatible avec bon nombre d'outils intégrés à Flash (publication de dessin vectos Flash vers script CJS, codage directement depuis Flash Pro et intégration totale avec, création de feuilles de sprites pour CJS, ... ...) ?

Et sinon, quelle idée de rendre la classe DisplayObjectContainer instanciable ? oO

Au passage, petite remarque sur le site internet en fin de message : il y a un décalage énorme entre la qualité des images des graphismes du site et la qualité des images utilisées (de mauvaises qualité, fortement pixelisées), essayez de changer ça, ça "casse" un peu l'image du site :S.

Je regarderai sa d'un peu plus près quand j'aurai le temps,
Bonne journée Image IPB

#3 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 20 December 2013 - 19:45 PM

Bonsoir Nicolas, merci de ton retour.

Je vais commencer par répondre à ta première question:

Quel avantage par rapport à createJs ?
Je dois t'avouer que j'en vois très peu à l'heure actuelle, createJs a pris une avance considérable c'est vrai, il supporte d'ailleurs plus de fonctionnalités que ne le supporte tomahawk.

Les seuls avantages que je vois pour tomahawk sont :

- De meilleures perfs globales si on prend un nombre de Bitmap xxx donnés, j'obtiens de façon générale, de meilleures perfs brutes.
Bien sur createJs supporte déjà le cache de manière sympa, ce qui accélère grandement les perfs. Tomahawk l'accepte aussi, mais la feature est encore en cours de développement, à terme, j'aimerais que le caching soit parfait.

- Bien qu'utilisable en production, Tomahawk est également un moteur à vocation pédagogique, qui est livré avec un pdf explicatif retraçant les différentes étapes de création du moteur. Le but de Tomahawk est surtout de faire en sorte que l'ensemble des développeurs HTML5 ( ceux venant du flash et les autres ) puissent aborder de manière sereine la création de leur propre moteur. Je suis en train de cleaner le pdf en ce moment, je le pusherai ce week end.

- Si je ne me trompe pas, et là j'avance sur des charbons ardents, createJs ne propose pas les champs textes éditables ( si oui pardon d'avance ) ce que propose Tomahawk, ( je suis en train de pusher la modif sur le github à l'instant ).

-Et enfin dernier avantage, Tomahawk offre une alternative supplémentaire ( qui a dit "on s'en fout" Image IPB ?)


Le fait de rendre la classe DisplayObjectContainer instanciable ne s'est pas vraiment posé, au cours du développement je n'ai pas ressenti de besoin précis de créer une classe Sprite par dessus, mais si tu vois un avantage réel à le faire je suis carrément ouvert là dessus.
D'ailleurs Tomahawk a vocation à être maintenu par une communauté de développeurs et pas uniquement nous. Si vous voulez contribuer vous êtes les bienvenus !

PS: je tiens compte de tes remarques pour les images du site et te remercie de ce retour.

#4 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 21 December 2013 - 00:19 AM

Au niveau des champs texte éditables : en effet, CreateJS nous oblige à passer par un élément HTML que l'on récupère ensuite et que l'on peut intégrer dans des symboles ou autre. On peut ensuite l'utiliser comme les autres (s'il fait parti d'un clip par exemple, il sera déplacé en même temps), mais pas totalement (impossible de placer un autre Sprite au dessus par exemple).

Pour DisplayObject et DisplayObjectContainer, le fait que ce soit deux classes abstraites me semble évident, elle ne servent qu'à définir clairement les objets "affichables", et la classe DisplayObjectContainer, héritant de DisplayObject, définit les objets affichables qui peuvent contenir d'autres objets.

Alors pour moi il y a deux cas, soit le seul "displayObjectContainer" que tu as est un sprite, dans ce cas autant renommer ta classe DisplayObjectContainer en Sprite directement (même si personnellement je trouve ça "peu prévoyant"). Soit tu en as d'autres ou en aura d'autres (MovieClip et Stage sont les seuls en AS3 je crois, Shape n'héritant que de DisplayObject), et dans ce cas Sprite, Stage et MovieClip sont trois classes héritières de DisplayObjectContainer, classe abstraite définissant uniquement la capacité de contenir des "DisplayObject", et elle même héritère de DisplayObject.

Dans tous les cas, permettre d'instancier ces classes me semble tordu ...
J'ai peut être l'air de pinailler comme ça, mais j'ai vraiment l'impression qu'en ne respectant pas le fait que ces deux classes soient abstraites, on casse vraiment toute la logique des classes de base ...

Et globalement, si DisplayObject définit les fonctions vitales a l'affichage d'un objet, et rien de plus, et DisplayObjectContainer définit uniquement la capacité de contenir des objets, c'est beaucoup beaucoup plus clair niveau code !

#5 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 22 December 2013 - 18:29 PM

C'est clairement le cas à l'heure actuelle en vérité, DisplayObject définit les objets d'affichage et DisplayObjectContainer définit les classes qui peuvent contenir des enfants. Bien sur, dès que j'ai une classe qui a recours à des fonctions précises, j'en crée une qui hérite de la classe DisplayObject ou DisplayObjectContainer.

Cependant, je n'ai pas émulé de mécanisme permettant de rendre abstraites ces deux classes ce qui fait que si vous voulez les instancier c'est votre choix ou non ;).

En revanche si tu jettes un oeil au code tu verras que la classe Bitmap hérite bien de DisplayObject et MovieClip hérite bien de la classe DisplayObjectContainer.

Les ajouts de fonctionnalités niveau code qu'apporte Sprite ne sont pas si nombreuses et pour l'instant je n'ai pas encore eu le besoin de les implémenter mais il est clair que ça arrivera par la suite ( ne serait-ce que pour les méthodes startDrag et stopDrag qui sont bien utiles sur Sprite ).

Au niveau des champs textes, les miens sont directement codés avec canvas, ce qui vous permettra d'avoir un controle total sur l'affichage du texte et de créer des libs sympas comme en son temps flasheff ( d'ailleurs c'est un truc que je vais publier bientot ;) ).

Pour l'instant, la priorité de développement pour tomahawk est:

- les mask
-ajouter un namespace spécifique à tomahawk ( oui ça aurait du etre fait au début mais pour des problématiques de formation j'ai choisi de passer à côté du namespace )
-refaire toute une passe de tests unitaires sur l'ensemble de la lib
- Et surtout publier des tutos, car c'est dur de se lancer sur tomahawk sans un tuto de départ.

Ensuite je pourrai passer aux modifs un peu moins importantes comme:

-implémentation du cacheAsBitmap
-implémentation d'une classe Sprite

Bref n'hésitez surtout pas à nous faire des retours si vous avez déjà mis le nez dedans, sinon une page consacrée à tomahawk sera bientôt mise en ligne.

#6 Ou-Jedi

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 27 December 2013 - 21:05 PM

Salut tout le monde,
Je tien à saluer The Tiny Spark pour leurs efforts et surtout pour le fait de nous proposer une nouvelle alternative pour faire des truc sympa en 2D sur du canvas. Même si d'autres moteurs existent déja (CreateJS, PIXI...) je trouve que chaque moteur apporte sa particularité.
Je revenir à la comparaison CreateJS vs TH, pour la pluspart des tests que j'ai fait jusqu'à presnent TH l'emporte haut la main coté pérformences sur les mobiles (iPad2, iPhone4 iOS7 et Android4) en gardant le FPS à 60. ce qui n'etait malheureusement pas le cas pour CreateJS entre (30 et 47) même sur iPhone5...
je posterais des test dès que c'est aboutis ;)
@+

#7 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 27 December 2013 - 22:20 PM

Merci Ou-Jedi pour ton retour ça fait toujours plaisir de recevoir des éloges. Je tiens à précise que j'ai fait une MAJ de la lib aujourd'hui, elle est sensée ( et c'est bien le cas selon mes tests ) augmenter encore les performances.

Je vais de ce pas faire la comparaison avec createJs et si les perfs sont au rdv comme je l'espère ( je fais mes tests sur un iphone 3gs ios 7 ) et bien je finirai par l'implémentation du namespace et commencerait à rédiger des tutos.

Bonne soirée à tous et encore merci à toi Ou-Jedi

#8 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 30 December 2013 - 22:05 PM

Bon et bien voilà, nous avons ajouté :

- une classe Sprite ( vide pour l'instant mais je pense implémenter le startDrag, stopDrag mouseHandCursor plus tard )

- Les mask sont opérationnels et testés.

- Le cache est opérationnel et testés.

- Les perfs sont au minimum aussi bonnes que celles de createJs dans tout les cas, à ceci près que pour Tomahawk nous utilisons la méthode native window.requestAnimationFrame, qui ne force pas le fps, contrairement à createJs qui "force" avec un setTimeout, ce qui nous conduit à un affichage aussi fluide mais le fps répertorié est juste.

- Nous avons rajouté deux propriéts à nos DisplayObject: autoUpdate et updateNextFrame, celles-ci sont utiles dans le cas d'objets qui bougent peu, leur matrice sont alors recalculées à la demande ( il suffit de passer la propriété updateNextFrame à true ).

- Un fichier de test a été ajouté ainsi que la première version du pdf qui vous montre la conception pas à pas d'un moteur.


Il nous reste maintenant à implémenter les namespaces et créer une page avec de bons exemples.

En espérant avoir des retours de votre part, amsuez-vous ! Image IPB
https://github.com/t...yspark/tomahawk

#9 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 31 December 2013 - 00:22 AM

Et voilà enfin la release avec les namespaces est passée, j'en ai profité pour corriger quelques bugs sur les TextField.
Maintenant nous allons coder et mettre en ligne quelques exemples afin de vous apprendre à vous servir de Tomahawk

#10 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 19 March 2014 - 21:31 PM

La lib a bien évolué et en est maintenant rendue à un stade plutôt sympa.
Quelques projets professionnels ont été réalisés à l'aide de tomahawk ( vous aurez des liens très bientôt ).

Et pour juillet, tomahawk passera à webgl ! Ensuite viendront les outils en ligne qui vous permettront de travailler avec tomahawk, pour ceux travaillant avec flash, un outil interne sera se chargeant de convertir les movieclip en anim tomahawk sera mis en ligne.

#11 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 09 April 2014 - 13:16 PM

Le livre blanc associé au moteur ( en tout cas sa version pédagogique ) est en ligne à l'adresse suivante: http://forums.mediab...__fromsearch__1 !

Bonne lecture.

#12 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 10 October 2014 - 08:26 AM

Bonjour,

(tiens je crois que je t'ai eu en formation y'a pas longtemps en responsive...)

Je déterre un peu ce sujet car je fais un petit comparatif des moteurs 2d JS/Canvas, etc. afin de migrer une appli flash en html. (J'ai essayé FabricJS, Raphael, CreateJS), mais pas tomahawk...

Le gros point faible de tous ces moteurs est la gestion des textes, on est encore à l'age de pierre...(même pas une gestion multicolor correcte/lineHeight imprécise, etc, etc......).

Qu'en est t il du support des textfields dans ce moteur ? (gestion des styles/multicolor, paragraphes, etc..)

Merci pour ta réponse.
Attraktive Medias
Développement Multimedia

#13 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 10 October 2014 - 10:14 AM

Bonjour à toi, Alors pour les textes, le support du multicolor, multiline, multifonts est présent ( calqué sur l'API de flash )

#14 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 10 October 2014 - 10:39 AM

ahhhhhhhhhh tu va peut etre égayer ma journée dis donc... :)

tu as des exemples sous la main ? J'ai regardé le livre blanc, rien sur la partie TextField, TextFormat..?

Est ce que ce moteur est utilisable en prod ?

Merci
Attraktive Medias
Développement Multimedia

#15 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 10 October 2014 - 12:08 PM

Oui le moteur est utilisable en prod il suffit d'aller sur http://the-tiny-spark.com/tomahawk/ et tu auras accès à tout ce dont tu as besoin :)

EDIT: j'ai pondu un tuto pour les bases de l'affichage avec tomahawk ici -> http://forums.mediab...tomahawk_bases1
EDIT 2: tu peux ausis me contacter à l'adresse contact@the-tiny-spark.com

#16 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 10 October 2014 - 12:33 PM

ok merci.. je check tout ca ;)
Attraktive Medias
Développement Multimedia

#17 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 10 October 2014 - 13:35 PM

mmmmhh..pas de prise en charge du HTML pour TextField apparemment ? ou suis je passé à côté ? :)

Edit // en tout cas, super API, ca fait du bien de retrouver ses petits..^^
Attraktive Medias
Développement Multimedia

#18 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 10 October 2014 - 13:38 PM

Et non pour l'instant pas de prise en charge du HTML dans les textfield =) mais rien ne t'empêches de faire un request sur github ou de prendre part au développement d'un interpréteur html qui convertirait ça en directive tomahawk ;)

EDIT: merci pour le compliment :)

#19 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 10 October 2014 - 14:09 PM

ok je continue mes tests et te fais un retour :)
Attraktive Medias
Développement Multimedia

#20 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 10 October 2014 - 14:18 PM

Petite question sur le comportement du TextField..

Je voudrais que sa largeur soit fixée par son contenu (le texte) SANS lui donner de width explicite... (genre le TextFieldAutoSize.LEFT de Flash...)

Est ce prévu ?

Merci
Attraktive Medias
Développement Multimedia

#21 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 10 October 2014 - 15:57 PM

Alors pas définition le width dans flash est défini, c'est le height qui s'adapte, avec tomahawk pour avoir le height qui s'adapte tu dois passer la valeur de la propriété "autoSize" à true

#22 Claude24

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 13 October 2014 - 05:15 AM

D'accord. C'est le fait.

#23 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 13 October 2014 - 07:35 AM

mmmm...pas chez moi... j'avais déjà bien sur mis la propriété autoSize à true... mais le textfield reste à 100px (la taille par défault je suppose comme en as3...)

edit : (d'ailleurs la doc n'est pas super claire pour autoSize, car elle évoque juste la height : Specifies if the text field height will match the real text height.)


progressFormat.bold = true;
progressFormat.textColor = "#ccc";
progressFormat.size = 12;
progressText.background = true;
progressText.autoSize = true;
progressText.backgroundColor = "#f5f5f5";
progressText.defaultTextFormat = progressFormat;
progressText.setTextAlign( tomahawk_ns.TextField.ALIGN_LEFT );

progressText.setText("Chargement XML...");

 

Dans mon exemple, le mot "XML" chasse à la ligne au lieu de faire s'aggrandir le textField par la droite...

Une idée ?
Attraktive Medias
Développement Multimedia

#24 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 13 October 2014 - 12:50 PM

En effet, comme précisé, le textfield ne se resize pas en largeur, seulement en hauteur ! Il est donc normal que tu ne distingues pas de changement, si tu utilises une typo "spéciale" je te conseille de passer la propriété "forceRefresh" à true le textfield sera redessiné à chaque frame et non pas actualisé à chaque changement ( il y a un système de cache assez compliqué mis ne place derrière pour optimiser les perfs ).

Si ton texte n'est pas gros, tu peux te permettre d'avoir ce paramètre à true, après le moteur de texte de tomahawk n'est pas encore parfait ( loin de là même il faudrait que je le réécrive ), je l'optimiserai, voire le réécrirai entièrement ( en conservant la même API rétro-compatibilité oblige) dès que j'aurai fini le passage à webgl.

#25 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 13 October 2014 - 12:58 PM

Merci pour ta réponse

arf.. dommage pour la largeur.. un vrai autoSize (comprendre TextFieldAutoSize.LEFT de l'AS3 et pas l'équivalent de overflow = auto en CSS) aurait été au poil..
ça oblige à calculer la largeur théorique du textField en fonction de son textFormat etc.. et lui affecter, ca risque d'être approximatif... a voir...^^ pour le coup, easelJS et factoryJS gèrent très bien le truc si ca peut t'inspirer ;)

++
Attraktive Medias
Développement Multimedia

#26 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 13 October 2014 - 14:02 PM

Ce n'est pas une fonctionnalité impossible à ajouter en l'état, la classe TextField calcule déjà la largeur totale :) pour construire les lignes, il suffit d'étendre la classe et changer un peu le comportement ;)

#27 Attraktive Medias

  • Members
  • PipPipPipPipPipPipPipPip
  • 1602 messages

Posté 13 October 2014 - 14:51 PM

oui oui.. mais c'était davantage une reflexion pour garder la logique du framework "flash-like" au niveau du comportement de l'objet TextField
Attraktive Medias
Développement Multimedia

#28 thot

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 328 messages

Posté 14 October 2014 - 20:43 PM

Merci en tout cas de tes retours, ça me fait très plaisir :)



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP