TousExpérimentations / CSS 3 / CSS 3D Game Editor

Éditeur de jeu 3D(inachevé) réalisé avec seulement du CSS et du Javascript ! Permet de créé des cartes de jeu 3D avec des blocs de tailles uniformes. Plusieurs textures et couleurs sont disponibles.

Introduction

J'ai commencer ce projet un peu aléatoirement, c'est donc pas très surprenant qu'il ai aboutit nul pars lol. Néanmoins, j'ai mis ici la version incomplète de cet éditeur de jeu qui m'a passionner pendant les quelques jours de son développement, et qui malheureusement n'ira pas plus loin car très vite on remarque le manque de performance lorsqu'il y a plusieurs cubes sur la scène...

Fonctionnement

L'éditeur

L'éditeur utilise les fonctionnalités 3D de CSS3 (présente seulement dans ne navigateur Safari pour l'instant).

Les cubes

Les cubes créés dans l'éditeur sont en fait des balises HTML « DIV » avec un background-image pour les textures. Lorsqu'un cube est collé sur un autre, les deux faces qui se touchent se voient attribué la propriété CSS « display:none » pour alléger le processeur.

Les textures complémentaires sont détectés, exemple : si on place deux cubes en terre avec une couche de pelouse un par dessus l'autre, le cube du dessous se transformera complètement en terre (parce que c'est illogique que de la pelouse pousse entre deux couches de terre).

Je me suis aussi servit de la propriété « box-shadow » de CSS3 pour permettre de donner un effet de rayonnement aux cubes.

Les particules

J'étais rendu à faire les particules quand j'ai arrêter de travailler sur le projet alors elles sont incomplètes (et je les ai complètement enlever en mettant l'exemple en ligne ici). Elles étaient générés lorsqu'un cube était déplacé et elles utilisait les textures de ce cube. Ainsi, lorsqu'on déplaçait un cube de neige, des particules de neige étaient envoyé en l'air. Elles auraient aussi pu servir à créer des générateur de particules (du feu, de la pluie, de la neige, etc).

La musique

La musique est ajoutée tout simplement grâce à la balise « audio » de HTML5.

Version Beta 1.0

Catégorie : Expérimentations / CSS 3

Créé le : 19 septembre 2010

Phase : Abandonné


Prog. : HTML5, CSS3, JavaScript et PHP.

Navigateurs : Safari.