Devrais-je utiliser HTML5 Canvas ou CSS3 Sprites pour animer des objets pour un jeu?

Question

Je suis en train de commencer à construire un jeu de stratégie (think warcraft) pour le web. J'ai fait des recherches sur les sprites HTML5 Canvas et CSS3 et je ne peux toujours pas décider quelle technologie utiliser.

Le jeu ne sera pas terminé pour 6 mois supplémentaires.

Tout conseil serait apprécié.

Answer 1

Comme vous avez probablement entendu si souvent ... « ça dépend ... » ™

Ma suggestion serait considérer la sensation de l'application que vous êtes après. Si vous essayez de créer une application très riche graphiquement, principalement des images, j'utiliserais Canvas. Cependant, si vous essayez d'animer certains graphiques, mais que la page reste et se comporte davantage comme un "Web", mélangé avec d'autres contenus HTML, j'essaierais CSS3.

Deux points supplémentaires:

• Actuellement, Canvas est mieux que CSS3 animation pris en charge/sprites.
• Si vous utilisez Canvas, vous allez implémenter votre propre boucle de rendu et code d'animation (ou utiliser une 3ème partie de bibliothèque). Votre code crée une animation en composant les différentes couches de chaque image, en appliquant le mouvement et en répétant. Vous ne pouvez pas simplement dire "déplacez légèrement cette image vers la droite". Vous devrez le faire vous-même.

Answer 2

Le jeu web EA « Lords of Ultima », aussi terne que ce soit, est un excellent exemple d'un style WarCraft (bien, il est plus construction de la ville car il n'y a pas d'unités visibles) overworld, avec des animations et tout, construit sur une base de sprite HTML et CSS pure. Il semble et fonctionne bien et je pense que la nature de la boîte-bloc carré de HTML convient à ce type de conception de carreaux, en particulier depuis une grande partie du traitement de l'image (ou <div> avec un arrière-plan, changer la position de fond pour l'animation) et la manipulation clic/souris est faite pour vous en html simple.

Si vous faites de la toile, vous devez gérer vous-même ce qui augmentera considérablement la complexité et le temps de dev. Vous aurez plus de contrôle sur les éléments mineurs et des performances améliorées, mais vous perdrez également (si c'est important) une plus grande rétrocompatibilité avec les anciens navigateurs. Cela dépend donc de la complexité de votre conception et du type de performance dont vous avez besoin.

Answer 3

Il ya des avantages et des inconvénients à la fois. Actuellement, Canvas est mieux supporté que CSS3, mais vous avez dit que votre jeu ne sera pas fait avant 6 mois, d'ici là le support pour CSS3 pourrait être bien meilleur. Il y a aussi beaucoup d'autres variables ici, telles que: Sur quel navigateur le jeu sera-t-il visualisé? À quel point les graphiques dont vous avez besoin pour animer sont-ils avancés? etc ... Je dirais que la toile serait mieux pour supporter la génération actuelle de navigateurs et pour les graphismes de jeux, cependant CSS3 serait plus rapide, mais ne serait même pas proche du support ou de la gestion graphique. Mais il ne semble pas que vous soyez pressé de le faire.

En gros:

Canvas: Graphics, soutien actuel utilisateurs navigateur

CSS3: Vitesse du développement

éther va fonctionner. Mais pour l'instant j'utiliserais Canvas. Cependant, 6 mois dans le monde de la technologie est une éternité, les choses pourraient être très différentes alors.

Answer 4

Utilisez le canvas. Si vous utilisez des sprites CSS pour construire un jeu, alors vous allez faire beaucoup de <div> qui effectue des opérations sur le DOM, ce qui peut ralentir et aussi avoir beaucoup de problèmes de focus et de compatibilité.

Il est peut-être rentable d'échanger le temps de développement pour la performance sur <canvas>, en supposant que "Un code sera maintenu pour toujours".

Je pense que le système d'image-objet CSS3 prend plus de temps à développer, car vous devez gérer la compatibilité du navigateur.

Les navigateurs comme IE 8 (8 ou 9?) Utilisent GPU pour accélérer les graphiques, ce qui vous permet d'obtenir le déjeuner gratuit de la loi de Moore.