Créer une boutique virtuelle 3D avec le SCS 1.5

Les ateliers de Doc neo-FX
neo-FX, 08 May 2002

Note : Ce tutoriel a été réalisé avec la version 1.5 du SCS et avec les modules standard du SCS 1.5.

Ce tutoriel va vous permettre de suivre étape par étape la construction entière d'une cellule SCOL

Comment créer un espace destiné à la vente en ligne avec comme seul outils, le SCS et un logiciel de dessin classique ? Tout d'abord, lancez le SCS, vous allez vous retrouvez face à une feuille blanche. Sur ce plan de travail, vous allez pouvoir placer les différents éléments de votre programme. Ces éléments sont appelés modules. Pour créer un nouveau module, il suffit de cliquer avec le bouton droit de la souris et de choisir : CREATE A NEW MODULE. Puis nous créerons des liens entre eux afin de le faire interagir. Pour notre exemple, nous allons procéder en plusieurs étapes.

- 1ère étape : Choix et aménagement de l'espace/la cellule 3D.

- 2ème étape : Choix et dispositions des modules.

- 3ème étape : Création des liens entre les modules

- 4ème étape : Création des interfaces client/serveur

- 5ème étape : mise en ligne de votre boutique virtuelle.

Choix et aménagement de l'espace 3D

Tout d'abord nous allons nous occuper de notre espace 3D : Le module qui gère cela, est généralement le plus important du programme. C'est le module C3D. Donc, cliquez avec le bouton droit sur votre plan de travail, choisissez CREATE A NEW MODULE, et sélectionnez le module C3D. Une fenêtre va s'afficher, sur laquelle vous avez une fenêtre noire sur la gauche et une liste vide sur la droite. La fenêtre de gauche est votre fenêtre de visualisation et celle de droite la liste des objets 3D que vous allez insérer.
(Rq : un autre module 3d est disponible le C3D2, pour pouvoir l'utiliser il vous faudra cliquer sur "New class of module" puis sélectionner et ouvrir le module C3D2 qui se trouve dans le répertoire ..DMS/3D/C3D)

Pour connaître les outils de l'interface du module C3D2, cliquez ici :

La première chose à faire va être de choisir votre espace. Cliquez sur le bouton ADD pour ajouter un objet (ici un espace 3D). Pour notre exemple, j'ai choisi la room1003.m3d dans la bibliothèque MIDLAGE. Pour la sélectionner, après avoir cliquer sur le bouton ADD, vous vous retrouvez face à une fenêtre décrivant l'arborescence à partir du répertoire scolpartition. Les librairies d'objets et de textures se trouvent dans le répertoire LIB. La room1003.m3d se trouve dans le répertoire : LIB3DROOMMIDLAGE. Sélectionnez là, et cliquez sur ouvrir.

Vous voilà face à votre salle. Nous verrons plus tard pour les textures. Pour vous déplacer dedans, vous avez différentes méthodes :

Avance -> Cliquez et allez vers le haut avec la souris

Recule -> Cliquez et allez vers le bas avec la souris

Gauche/Droite -> Cliquez et allez vers la gauche ou la droite avec la souris.

Monter -> Lorsque cela est possible, cliquez et allez vers le haut avec la souris tout en maintenant la touche [Ctrl] enfoncée.

Descendre -> Lorsque cela est possible, cliquez et allez vers le bas avec la souris tout en maintenant la touche [Ctrl] enfoncée.

Lever la tête -> Cliquez et allez vers le haut avec la souris tout en maintenant la touche [Shift] enfoncée.

Baisser la tête -> Cliquez et allez vers le bas avec la souris tout en maintenant la touche [Shift] enfoncée.

Maintenant vous allez pouvoir démarrer l'aménagement de votre cellule. Pour cela vous avez l'embarras du choix dans la vaste librairie d'objets 3D qui se trouve dans le répertoire : LIB3DFURNITUR. Les objets sont classés par librairies (Moyen Age, Science fiction, contemporain,…), puis par type d'objets.

Installez des meubles qui feront office de présentoirs (armoires, tables, …), puis placez quelques panneaux qui vous serviront d'affiches. Lorsque vous insérez un objet, il se place au milieu de votre pièce (rq : j'ai placé dans l'exemple, un grand écran qui servira plus tard, comme média d'information).

Pour le déplacer, il va vous falloir cliquer sur le bouton MOVE et choisir la position de laquelle vous allez le déplacer (Right view, Top view …). Pour le déplacer sur l'axe des X cliquer avec le bouton gauche et déplacez votre souris. Pour le déplacer sur l'axe des Y cliquer avec le bouton droit et déplacez votre souris. Pour lui faire subir une rotation, maintenez la touche [shift] et tout en cliquant sur le bouton gauche, déplacez votre souris. Vous pouvez aussi, à tout moment, effacer les objets qui ne vous plaisent pas. Il suffit de cliquer sur l'objet cité dans la liste et de cliquer sur le bouton DEL. Vous avez la possibilité aussi de modifiez l'échelle des objets, grâce au bouton SCALE. Attention : Lorsque vous cliquez sur un objet dans la fenêtre de visualisation, vous le sélectionnez.

Nous allons pouvoir, maintenant que votre espace 3D est aménagé, l'habiller un peu. Pour pouvoir modifier les textures de vos objets, il suffit de sélectionner un objet ce qui fera apparaître, dans la liste de droite, les différentes textures que comporte votre objet. Pour les modifier, il faut sélectionner la texture et cliquer sur le bouton texture. Une fenêtre apparaîtra avec la texture sélectionnée, et vous pourrez à ce moment la modifier en cliquant sur le bouton [CHANGE]. Choisissez le fichier dans la vaste librairie de textures qui vous est proposée.

Pour placer des textures personnelles, il faut respecter certaines règles: La texture doit être de format Jpeg, ou Bitmap, même si le Jpeg est recommandé vu son faible poids pour ses voyages sur le Net. La texture doit être de taille 64*64 pixels ou 128*128 ou 256*256 et le fichier doit être placé dans le répertoire ..SCOLpartition. Notons que pour une meilleure organisation, un répertoire "personal" est prévu à cet effet dans le répertoire ..SCOLpartitionLIB.
Conseil: créez un répertoire boutique3D, afin de ne pas mélanger vos textures.

Vous avez certainement remarqué que les objets et les murs sont immatériels. Pour y remédier nous allons allouer des boites de collisions aux objets. Il vous suffit de sélectionner un objet et de cliquer sur le bouton COLLISION BOX. Voilà votre objet impénétrable. C'est le moment de vérifier que l'on peut facilement se déplacer dans votre cellule. C'est pour cela que c'est vraiment au dernier moment que l'on applique les collisions.

Maintenant il va falloir donner des liens à vos objets afin de leur appliquer des actions (rotations, défilement de textures, liens vers le WEB, etc…). Pour cela, il suffit de sélectionner un objet dans l'espace 3D et de cliquer sur la barre OBJECTS afin de changer de type de réglages. Allez sur le menu LINKS, puis cliquez sur le bouton ADD. Il vous demandera alors le nom de votre lien. Dans l'exemple, j'ai appliqué des liens sur les produits à vendre en leur donnant des noms bien spécifiques (nom du produit). Puis j'en ai aussi placé sur l'objet écran afin de lui appliquer un effet de défilement de texture.

Nous allons maintenant déterminer les caractéristiques physiques de votre cellule 3D. Pour cela, allez dans le menu OBSERVATOR en cliquant sur la barre LINKS. Vous allez pouvoir déterminer une gravité (gravity) pour éviter que vos clients ne s'envolent ainsi que les limites de votre espace 3D (collision) pour éviter que vos clients ne traversent les murs. Pour la COLLISION BOX, il va vous falloir récupérer le fichier .box qui correspond à votre salle. Dans mon exemple, le fichier .box, se trouve dans le répertoire où vous avez récupérer votre salle (LIB3DROOMMIDLAGE oom1003.box). Pour la gravité, choisissez une valeur de 20 pour être sûr que l'on ne puissent pas décoller. Vous pouvez aussi choisir la couleur de l'environnement, dans l'exemple proposé j'ai choisi le bleu (comme le ciel, original non ?)

Dernière étape de notre aménagement, la position d'entrée dans votre espace 3D. Elle déterminera, la position où se retrouvera votre client quand il entrera dans votre cellule. Pour cela, placez-vous à l'endroit de votre choix et cliquez sur la barre OBSERVATOR pour y choisir POSITION. Cliquez sur le bouton ADDCAMPOS, et nommez cette position entry, c'est très important. Voilà, votre espace 3D est près, avant de passer à l'étape suivante, nous allons sauvegarder notre travail dans un répertoire préalablement créé (Boutique3D). Cliquez sur le menu FILE et choisissez SAVE AS… Nommez votre travail Boutique3D et cliquez sur Enregistrer.

Nous allons maintenant construire notre programme qui s'occupera de l'ouverture sur le net de notre Boutique 3D, de son interactivité et de sa gestion.

Nous allons pour notre exemple placer plusieurs modules différents. Vous pouvez déjà remarquer la présence de notre module principal (Boutique3D) qui se trouve sur notre plan de travail. Il faut savoir que pour "ouvrir" notre espace aux internautes, il va falloir placer des modules indispensables. Rappelons que, pour insérer un module sur notre plan de travail, il nous suffit de cliquer avec le bouton droit sur ce dernier et choisir l'option CREATE A MODULE. Une liste de modules disponibles, va s'afficher, et il ne suffira plus qu'à les choisir.

Je vous propose la liste des modules que j'ai utilisé pour notre exemple. Pour découvrir les paramètres à insérer dans les modules, vous n'avez qu'à cliquer sur leurs icônes.

Les modules indispensables :

	LOG: module qui permettra d'enregistrer des données relatives au fonctionnement de votre site. Un fichier sera généré dans le répertoire ..SCOLPARTITIONLOG ayant le format suivant : nom_du_site.nom_du_module_log.date.
	LOGIN: module gérant les pseudonymes des avatars
	PHOTO: module gérant les photos des avatars.
	EXCLUSION: module gérant les entrées/sorties des avatars.

Les modules de communications :

	TO COMUTRON : module permettant le dialogue privé entre deux avatars (Chat, téléphonie et Visiophonie).
	SPEAKER : module gérant les conversations audio dans l'espace 3D.
	TERM : module qui permet d'ouvrir une interface de dialogue textuelle (Chat).

Les modules d'interactivité :

IO : module gérant les liens vers des sites WEB, des ActiveX ou d'autres mondes SCOL

Autre module bien utile :

CONTACT : qui permet d'afficher sur l'interface serveur un bouton de connexion (bien utile pour les vérifications).

Ces modules ne nécessitent pas de paramétrage. Donnez leur un nom et sauvegardez les dans le répertoire hébergeant votre site.

Les modules d'interface 2D :

	BANNER : module permettant l'affichage d'un bandeau déroulant sur l'interface client.
		Le module de "banner" vous demandera les différents textes que vous voulez voir affichés, sa couleur et celle du fond. La case à cocher "save dynamic change", ne nous servira pas dans notre exemple. Mais sachez que nous pouvons faire un lien sur ce module qui permettrait de modifier en temps réel, les textes à partir d'une interface client.
NAVIGATION : module permettant l'affichage de la barre de navigation
		Le module de navigation nécessite un faible paramétrage. Vous pouvez choisir la direction de votre barre de navigation (verticale par défaut). Mais vous pouvez aussi choisir son apparence (un fichier .BMP de 56*120 pixels contenant 3 boutons).

Les modules d'effets 3D :

ROTATE : module permettant affecter une rotation à un objet 3D
		Le module ROTATE nécessite comme paramétrage l'axe de rotation (X,Y,Z) et la vitesse de rotation (en tour/minute). Ici, j'effectue une rotation sur l'axe des y d'une vitesse de 6 tours/minute dans le sens contraire des aiguilles d'une montre (le "-" devant le 6).
	SHIFT : module permettant d'affecter un défilement de texture sur un objet 3D (utile pour écran de présentation)
		Le module SHIFT, nécessite comme paramètre, deux valeurs séparées par un espace. La première indiquera la vitesse de défilement horizontale de la texture, la deuxième la verticale. Donc dans notre exemple, nous aurons une texture qui défilera de bas en haut (vu le signe négatif).

Les modules d'interactivité :

	BITMAP : module permettant l'affichage d'illustration dans une fenêtre
		Le module BITMAP, nécessite la création au préalable de fichiers .JPG ou .BMP, qui seront appelés par un événement. Il vous suffit donc de cliquer sur le bouton ADD, de choisir votre illustration, et de lui donner un alias. Dans notre exemple, les images incluses dans ce module, contiennent les packages des produits mis en vente.
	TEXT : module permettant l'affichage de texte dans une fenêtre.
		Le module TEXT, nécessite la création au préalable de fichiers .TXT, qui seront appelés par un évenement. Il vous suffit donc de cliquer sur le bouton ADD, de choisir votre fichier .TXT, et de lui donner un alias. Dans notre exemple, les textes inclus dans ce module, contiennent les caractéristiques techniques des produits mis en vente.

3ème étape

Nous en venons à l'étape la plus importante de notre réalisation. En effet les modules doivent interagir entre eux (exemple le module C3D2 et le module BITMAP nécessite une connexion pour que lorsque l'on clique sur un produit, son image s'affiche). Nous allons alors disposer des liens entre les modules. Pour créer un lien entre deux modules, utilisez le bouton droit de la souris sur le module de départ, choisissez l'option CREATE A LINK FROM EVENT, choisissez dans la liste qui apparaît l'événement qui vous intéresse, cliquez ensuite (toujours avec le bouton droit) sur le module d'arrivée pour déterminer l'action. Pour notre exemple, il vous suffit de cliquer sur les modules du plan ci-dessus pour afficher les paramètres de leurs liens.

Notons que notre plan est lui même un module (le SHELL, blackbox) et aura donc aussi des connexions avec les autres modules.

MODULES	LIENS ENTRANTS				LIENS SORTANTS
LOG	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	IO	log	LOG	log
	LOGIN	log	LOG	log
	SHELL	out	LOG	unregister

MODULES	LIENS ENTRANTS				LIENS SORTANTS
LOGIN	FROM MODULE	EVENT	TO MODULE	ACTION	FROM MODULE	EVENT	TO MODULE	ACTION
	SHELL	start	LOGIN	start	LOGIN	loginchanged	C3D2	!chglogin
	SHELL	start	LOGIN	start	LOGIN	log	LOG	log

MODULES	LIENS ENTRANTS				LIENS SORTANTS
PHOTO	FROM MODULE	EVENT	TO MODULE	ACTION	FROM MODULE	EVENT	TO MODULE	ACTION
	C3D2	getAv	PHOTO	getAv	PHOTO	changed	C3D2	!chgav
	SHELL	start	PHOTO	start_show	PHOTO	changed	C3D2	!chgav

MODULES	LIENS ENTRANTS				LIENS SORTANTS
EXCLUSION	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	C3D2	entering	EXCLUSION	register

MODULES	LIENS ENTRANTS				LIENS SORTANTS
TO COMMUTRON	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	C3D2	select2	TOCOM	tocomutron
	SHELL	start	TOCOM	start

MODULES	LIENS ENTRANTS				LIENS SORTANTS
SPEAKER	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	C3D2	entering	Speaker	start_direct

MODULES	LIENS ENTRANTS				LIENS SORTANTS
TERM	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	C3D2	getfocus	TERM	getDialog
	C3D2	hear	TERM	privateMsg
	SHELL	start	TERM	start

MODULES	LIENS ENTRANTS				LIENS SORTANTS
BANNER	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	SHELL	enter	BANNER	start

MODULES	LIENS ENTRANTS				LIENS SORTANTS
NAVIGATION	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	C3D2	getControl	NAVIGATION	getMotion
	SHELL	start	NAVIGATION	start

MODULES	LIENS ENTRANTS				LIENS SORTANTS
ROTATE	FROM MODULE	EVENT	TO MODULE	ACTION	FROM MODULE	EVENT	TO MODULE	ACTION
	C3D2	getObj	ROTATE	getobj	ROTATE	y-6 (paramètre définis dans ROTATE)	C3D2	addObj.nom de l'objet produit dans la 3D
					Idem pour tous les produits

MODULES	LIENS ENTRANTS				LIENS SORTANTS
SHIFT	FROM MODULE	EVENT	TO MODULE	ACTION	FROM MODULE	EVENT	TO MODULE	ACTION
	C3D2	getObj	SHIFT	getobj	SHIFT	0 -4 (paramètre définis dans SHIFT)	C3D2	addObj.nom de l'objet écran de pub dans la 3D
					Idem pour tous les écrans défilants

MODULES	LIENS ENTRANTS				LIENS SORTANTS
In/Out	FROM MODULE	EVENT	TO MODULE	ACTION	FROM MODULE	EVENT	TO MODULE	ACTION
	C3D2	*nom du panneau de pub dans la 3D*	IO	openUrl	IO	log	log	log
	BITMAP	alias du graphisme du produit.left	IO	openUrl
	Idem pour tous les panneaux publicitaires qui donnent accès au WEB, et pour tous les produits				Attention: les URL sont à insérer dans le paramètre du lien.

MODULES	LIENS ENTRANTS				LIENS SORTANTS
BITMAP	FROM MODULE	EVENT	TO MODULE	ACTION	FROM MODULE	EVENT	TO MODULE	ACTION
	C3D2	*nom de l'objet produit dans la 3D*	BITMAP	*alias du graphisme du produi*t	BITMAP	alias du graphisme du produit.left	IO	openUrl
	Idem pour tous les produits

MODULES	LIENS ENTRANTS				LIENS SORTANTS
TEXT	FROM MODULE	EVENT	TO MODULE	ACTION	PAS DE LIENS SORTANTS
	C3D2	*nom de l'objet produit dans la 3D*	TEXT	*alias du texte informatif sur le produit*
	Idem pour tous les produits

MODULES	LIENS ENTRANTS				LIENS SORTANTS
C3D2	FROM MODULE	EVENT	TO MODULE	ACTION	TOUS LES AUTRES LIENS SONT DEJA DECRIS PAR LES AUTRES MODULES
	SHELL	start	C3D2	entry (nom de la position d'entrée qui est toujours entry)
	TOUS LES AUTRES LIENS SONT DEJA DECRIS PAR LES AUTRES MODULES

MODULES	LIENS ENTRANTS				LIENS SORTANTS
CONTACT	PAS DE LIENS ENTRANTS				PAS DE LIENS SORTANTS

Création de l'interface 2D

4ème étape.

Nous allons maintenant nous attaquer à l'interface 2D de notre site. Cette interface sera en quelque sorte le panneau de contrôle du client. Il va nous falloir créer deux interfaces :

Une pour le serveur
Une pour le client

Cliquez sur le bouton de basculement et vous vous retrouvez devant une fenêtre vide. Nous allons donc créer des zones dans ces fenêtres qui contiendront des informations (vue 3D, liste des avatars, etc.…). La première chose à faire est de vérifier sur quelle interface nous sommes (serveur/client).Vérifiez l'icône dans la barre d'outil.

Client
Serveur

Pour connaître les outils de l'interface du SCS, cliquez ici

Commençons par celle du serveur :

Premièrement, nous allons choisir la taille de la fenêtre, simplement en la redimensionnant. A l'aide du bouton droit de la souris, nous allons cliquer dans cette fenêtre pour la configurer (choisissez EDIT THIS DOCUMENT). Vous allez pouvoir à ce moment choisir sa taille, choisir un fond (image ou mosaïque) et déterminer si vous voulez que ce soit une fenêtre proportionnelle ou référentielle (je vous conseille l'option PROPORTIONAL WINDOW, qui permet en fait de redimensionner toutes les zones de votre fenêtre lorsque vous modifiez sa taille).

Puis à l'aide du bouton droit de la souris, nous allons cliquer dans la fenêtre et choisir CREATE A NEW ZONE. Une zone apparaît alors. Donnez lui la dimension souhaitée et placez là à l'endroit qui vous convient. Nous allons maintenant configurer cette zone : Cliquez dessus avec le bouton droit et choisissez EDIT THIS ZONE. Vous allez pouvoir, lui donner un nom, et choisir le module qui correspond à l'information qui s'affichera dans celle-ci (liste de droite). Vous pouvez créer les liaisons entre les zones et les modules en cliquant directement avec le bouton droit sur la zone et choisir SHELL pour accéder à la liste de vos modules.

Pour notre exemple, le serveur aura besoin de deux zones :

Une zone contact reliée au module du même nom, qui affichera un bouton qui permettra de lancer une interface client à partir du serveur (pratique pour les tests en local).

Une zone log, reliée au module du même nom, qui affichera toutes les informations concernant le passage des clients dans votre site.

Attaquons nous à présent, à l'interface client :

Cliquez sur le bouton pour basculer sur l'interface client, redimensionnez là et renouvelez la procédure que l'on vient de faire avec celle du serveur.

Pour notre interface client, il nous faudra un grand nombre de zones, en voici la liste :

Zone BANNER : reliée au module BANNER : Banner (affiche la bannière déroulante)

Zone VIEW3D : reliée au module C3D2 : View (affiche votre fenêtre 3D)

Zone LISTE : reliée au module C3D2 : List (affiche la liste des avatars présents)

Zone INFO : reliée au module C3D2 : Info (affiche le nom du lien sur lequel l'avatar pointeras)

Zone CHAT : reliée au module TERM : Term (affiche la fenêtre de chat)

Zone PSEUDO BOUTON : reliée au module LOGIN : Button (affiche un bouton qui permet de changer de pseudo)

Zone PSEUDO : reliée au module LOGIN : Text (affiche le nom de l'avatar)

Zone SPEAK_REC : reliée au module SPEAKER : ButtonRec (affiche le bouton enregistrement pour la téléphonie)

one SPEAK_PLAY : reliée au module SPEAKER : ButtonPlay (affiche le bouton lecture pour la téléphonie)

Zone SPEAKER : reliée au module SPEAKER : Info (affiche le pseudo de l'avatar qui use du speaker)

Zone PHOTO : reliée au module PHOTO : Photo (affiche la photo de l'avatar)

Zone PHOTO BOUTON : reliée au module PHOTO : Button (affiche le bouton qui permet de changer de photo)

Zone NAV : reliée au module NAVIGATION : Nav (affiche votre barre de navigation)

Zone DOWNLOAD : qui n'est reliée à aucun module mais qui affichera l'avancement du téléchargement de votre site.

Puis pour présenter nos produits, nous allons créer une fenêtre pop-up : Cliquez avec le bouton droit, à l'extérieur de votre fenêtre client et choisissez ADD A POPUP WINDOW TO CLIENT. Une autre fenêtre se créée, et vous allez pouvoir y insérer les zones où s'afficheront les produits de votre boutique :

Zone BITMAP : reliée au module BITMAP : Bitmap (affiche les packages de vos produits)

Zone TEXT : reliée au module TEXT : Text (affiche les infos concernant vos produits)

Etape5 Voilà, votre site est construit, faites une dernière sauvegarde, pour éviter le pire. Pour lancer votre site cliquez sur le bouton RUN, puis sur le bouton CONNECTION pour voir le résultat. Ultérieurement, si vous voulez relancer votre serveur, vous n'avez qu'à lancer le fichier .SCOL qui a été généré par le SCS, qui se trouve dans le répertoire que vous avez créé antérieurement. Autre possibilité, allez sur le menu de configuration du SCOL ENGINE (clic droit sur l'icône SCOL), choisissez EDIT START MENU et sélectionnez votre fichier .SCOL par le bouton BROWSE, et cliquez sur ADD (après lui avoir donner un alias plus convenable que le chemin de votre fichier). Par la suite, lorsque vous voudrez lancer votre serveur, il vous suffira d'aller dans le SCOL ENGINE et de cliquer sur START pour avoir la liste des serveurs que vous avez créé.

Scolring

Download Scol Voy@ger