[WikiZ] Tout ce qu'il faut savoir sur Zspin

Some tutorials for starting with zspin.

Modérateurs : vik, Modérateurs

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 01 oct. 2015 - 22:35

Depuis la version 2.1 il faut un "rotateX(10deg)"

Pour exemple celui du Aeon

Code : Tout sélectionner

{
"transitionTime": 400,
"selectPosition": 7,
"hide": false,
"hideStart": 1500,
"hideDuration": 1500,
"type": "horizontal",
"containerStyle": {
    "perspective": "1000px",
   "perspective-origin": "50% 700px"
},
"points": [
{"x":8.7, "y":55, "transform": "rotateY(30deg) ", "scale":0, "index":1},
{"x":8.7, "y":60, "transform": "rotateY(30deg) ", "scale":1, "index":2},
{"x":14.16, "y":60, "transform": "rotateY(30deg) ", "scale":1, "index":3},
{"x":19.62, "y":60, "transform": "rotateY(30deg) ", "scale":1, "index":4},
{"x":25.08, "y":60, "transform": "rotateY(30deg) ", "scale":1, "index":5},
{"x":30.54, "y":60, "transform": "rotateY(30deg) ", "scale":1, "index":6},
{"x":36, "y":60, "transform": "rotateY(30deg) ", "scale":1, "index":7},
{"x":44.85, "y":65, "transform": "rotate(0deg) translateZ(40px)", "scale":1.2, "index":8},
{"x":53.7, "y":60, "transform": "rotateY(-30deg) ", "scale":1, "index":7},
{"x":59.16, "y":60, "transform": "rotateY(-30deg) ", "scale":1, "index":6},
{"x":64.62, "y":60, "transform": "rotateY(-30deg) ", "scale":1, "index":5},
{"x":70.08, "y":60, "transform": "rotateY(-30deg) ", "scale":1, "index":4},
{"x":75.54, "y":60, "transform": "rotateY(-30deg) ", "scale":1, "index":3},
{"x":81, "y":60, "transform": "rotateY(-30deg) ", "scale":1, "index":2},
{"x":81, "y":55, "transform": "rotateY(-30deg) ", "scale":0, "index":2}
]
}
Vous pouvez cumuler rotateX, rotateY et rotateZ
Et les translateX, Y et Z aussi^^

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 02 oct. 2015 - 07:57

Excellent ça, le coup du translate va m'arranger en plus je pense.
Merci msieur Porko

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 02 oct. 2015 - 08:39

Pour être plus précis Zspin 2.1 intègre les 3D transform pour les wheels
Voici la liste http://www.w3schools.com/css/css3_3dtransforms.asp

Il y aura encore plus de choix sur les prochaines versions^^

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 02 oct. 2015 - 10:26

Que veut dire cette section, ca s'interprète comment ?

Code : Tout sélectionner

"containerStyle": {
    "perspective": "1000px",
   "perspective-origin": "50% 700px"
},

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 02 oct. 2015 - 10:43

perspective-origin": "50% 700px" veut dire que ton point de vue camera est à 50% de la page en largeur (au centre) et à 700 pixels du haut


"perspective": "1000px", j'ai pas bien pigé pourquoi c'était en pixel mais c'est le Z du point de vue: à 1 tu est à bout portant (juste la perspective pas la camera) est tes images auront une grosse déformation et si tu mets 200000px c'est comme si tu matais aux jumelles un truc de loin tu auras moins de perspective

PS: dans "vos idées vos réalisation" j'ai édité mon message car j'ai réussi à loader un fichier 3D en collada

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 02 oct. 2015 - 22:16

Ok... ça promet de futures choses très intéressantes pour zspin !
Et la notion de type horizontal, ca change quoi pour la wheel ?

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 02 oct. 2015 - 22:29

C'est pour passer les commandes sur les boutons droite gauche comme ça t'as le choix^^

Avatar de l’utilisateur
Odissine
Virtuose
Virtuose
Messages : 1223
Inscription : 20 févr. 2014 - 00:00
A remercié : 17 fois
A été remercié : 37 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Odissine » 02 oct. 2015 - 22:45

Ca va donner du taf pour Himura ça encore :p
En tout cas On va pouvoir s'éclater ;)

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 02 oct. 2015 - 23:20

Porko a écrit :C'est pour passer les commandes sur les boutons droite gauche comme ça t'as le choix^^
Pouah c'est énorme ça ! Je n'osais espérer que ce soit ça :)
Justement j'était confronté au problème sur un thème vertical ce soir...

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 05 oct. 2015 - 19:03

J'en appelle à l'aide les experts du json !
Zspin tourne sur ma borne en 320x240, à cette résolution la wheel est aux 3/4 en dehors de l'écran. J'ai essayé de modifier (exagérément) un wheel.json pour la ramener vers la gauche de l'écran.
Mais rien n'y fait elle reste bloquée à droite, une piste pour améliorer ça ?

Mon fichier :

Code : Tout sélectionner

    {
    "transitionTime": 70,
    "selectPosition": 9,
    "hide": true,
    "hideStart": 1000,
    "hideDuration": 500,
    "type": "horizontal",
    "containerStyle": {
        "perspective": "1000px",
       "perspective-origin": "50% 50%"
    },
    "points": [
    {"x":70, "y":45, "transform": "rotateY(0deg) ", "scale":0, "index":1},
    {"x":51, "y":-10, "transform": "rotateY(23deg) ", "scale":1, "index":2},
    {"x":47, "y":-3, "transform": "rotateY(21deg) ", "scale":1, "index":3},
    {"x":44, "y":3, "transform": "rotateY(18deg) ", "scale":1, "index":4},
    {"x":41, "y":10, "transform": "rotateY(15deg) ", "scale":1, "index":5},
    {"x":39, "y":16, "transform": "rotateY(12deg) ", "scale":1, "index":6},
    {"x":37, "y":23, "transform": "rotateY(9deg) ", "scale":1, "index":7},
    {"x":36, "y":29, "transform": "rotateY(6deg) ", "scale":1, "index":8},
    {"x":35, "y":36, "transform": "rotateY(3deg) ", "scale":1, "index":9},
    {"x":35, "y":45, "transform": "rotateY(0deg) ", "scale":2, "index":10},
    {"x":35, "y":54, "transform": "rotateY(-3deg) ", "scale":1, "index":8},
    {"x":36, "y":60, "transform": "rotateY(-6deg) ", "scale":1, "index":7},
    {"x":37, "y":67, "transform": "rotateY(-9deg) ", "scale":1, "index":6},
    {"x":39, "y":73, "transform": "rotateY(-12deg) ", "scale":1, "index":5},
    {"x":41, "y":80, "transform": "rotateY(-15deg) ", "scale":1, "index":4}
	{"x":44, "y":86, "transform": "rotateY(-18deg) ", "scale":1, "index":3}
	{"x":47, "y":93, "transform": "rotateY(-21deg) ", "scale":1, "index":2}
	{"x":51, "y":99, "transform": "rotateY(-23deg) ", "scale":1, "index":1}
    ]
    }

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 05 oct. 2015 - 20:02

Alors... Es ce que tes wheels sont trop grande? Si oui mets le scale en 0.2, 0,3... Pour diminuer

le "x"= est un pourcentage de position de gauche (0) à droite (100)
"y"= est le pourcentage du haut (0) vers le bas (100)


Et pour finir chaque ligne doit se terminer par une virgule sauf la dernière ligne car je vois qu'il en manque^^

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 05 oct. 2015 - 20:48

Exact, pas vu les erreurs de virgule.
Je vais corriger ça et tenter le coup de réduire la taille des wheels.
En fait ça fait comme si l'axe central de la wheel était complètement décalé en dehors de l'écran et du coup je vois que le bord gauche des images de la wheel.
Si ça se règle pas je fais un screenshot.
Merci :)

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 05 oct. 2015 - 20:54

Effectivement il y a une taille minimum... Les wheels ne veulent pas se réduire plus est sortent de l'écran si la wheel est prévu pour une taille standard...

Dis moi si t'arrives à quelque chose de correct mais je ferai remonter l'info quand même

Avatar de l’utilisateur
vik
Connaisseur
Connaisseur
Messages : 473
Inscription : 01 janv. 1970 - 03:34
Localisation : Evreux
A remercié : 18 fois
A été remercié : 319 fois
Contact :

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par vik » 05 oct. 2015 - 20:57

valide ton json avec http://jsonlint.com/" onclick="window.open(this.href);return false;

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 05 oct. 2015 - 23:51

Merci Vik pour le lien c'est bien pratique.
Alors j'ai testé et c'était tout simplement ces vilaines virgules manquantes qui mettaient le souk !
Ça fonctionne, ma roue est bien décalée, un peu trop d'ailleurs mais c'est juste une question de réglage maintenant. J'ai également un léger décalage sur l'axe Y, qui est rattrapable je pense de la même manière.
J'ai pu rattraper mes wheels pour theme vertical qui elles étaient complètement en dehors de l'écran. Par contre j'ai pas l'impression que l'instruction "vertical" soit prise en compte, avec haut bas je défile et gauche droite ça fait des bonds un peu space.

Ca progresse, ça progresse, plus je passe de temps sur Zspin plus je l'apprécie... et je viens de commencer à jeter un oeil sur GWD pour les themes ça permet d'aller beaucoup plus loin que Hyperspin !

Avatar de l’utilisateur
Pnumekin
Amateur
Amateur
Messages : 57
Inscription : 11 mars 2013 - 00:00
A remercié : 1 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Pnumekin » 06 oct. 2015 - 19:45

En fait les instructions vertical/horizontal fonctionnent très bien, c'est moi qui réfléchissais à l'envers.
Pour un theme vertical, la roue est horizontale, il faut donc mettre horizontal, et inversement !

Avatar de l’utilisateur
Odissine
Virtuose
Virtuose
Messages : 1223
Inscription : 20 févr. 2014 - 00:00
A remercié : 17 fois
A été remercié : 37 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Odissine » 06 oct. 2015 - 21:10

J'en profite pour vous demander conseil et aide concernant l'affichage des wheels ...
On peut faire des rotation x, y ou z selon une certaine perspective , on peut jouer sur plusieurs autres paramètres pour modifier la position ... mais voilà j'ai beau chercher je n'arrive pas a obtenir le résultat ci-dessous :

Image

Pour obtenir ce resultat il faut que le DIV principal est une perspective de définie et dans ce div un autre DIV contenant la carré (wheel) que l'on souhaite afficher de cette manière ?

J'aurais voulu tester un affiche de wheel vertical comme ci-dessous :
Image

Si je mets dans le code :

Code : Tout sélectionner

"containerStyle": {
        "perspective": "500px",
    },
puis

Code : Tout sélectionner

"points": [
    {"x":70, "y":45, "transform": "rotateX(180deg) ", "scale":0, "index":1},
...
Ca me fait juster pencher la wheel vers la droite ... mais pas la perspective recherchée ;)
Voilà si qq'un à une idée ? En HTML je sais le faire ... Mais j'arrive pas a l'adapter sur mon fichier json :(

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 06 oct. 2015 - 21:36

il faut ajouter ça

Code : Tout sélectionner

"containerStyle": {
    "perspective": "1000px",
   "perspective-origin": "50% 700px"

Perspective te donne la "force" de la perspective, soit ta distance de vue (0=bout portant 100000= très loin)

Et le perspective origin te donne le point de vue, dans ce cas 50% de la largeur et 700px du haut

Avatar de l’utilisateur
Odissine
Virtuose
Virtuose
Messages : 1223
Inscription : 20 févr. 2014 - 00:00
A remercié : 17 fois
A été remercié : 37 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Odissine » 06 oct. 2015 - 21:55

J'avais déjà essayé cette option ... mais voilà le type de résultat obtenu :/
Image
Et voilà la code de mon json ;)

Code : Tout sélectionner

{
  "transitionTime": 50,
  "selectPosition": 9,
  "hide": false,
  "hideStart": 1500,
  "hideDuration": 1500,
  "type": "vertical",
  "containerStyle": {
     "perspective": "1000px",
     "perspective-origin": "50% 700px"
},
    "points": [
{"x":81, "y":0, "transform": "rotateX(-90deg)", "scale":0, "index":1},
{"x":81, "y":5, "transform": "rotateX(-80deg)", "scale":1.6, "index":2},
{"x":81, "y":10, "transform": "rotateX(-70deg)", "scale":1.6, "index":3},
{"x":81, "y":15, "transform": "rotateX(-60deg)", "scale":1.7, "index":4},
{"x":81, "y":20, "transform": "rotateX(-50deg)", "scale":1.7, "index":5},
{"x":81, "y":25, "transform": "rotateX(-40deg)", "scale":1.8, "index":6},
{"x":81, "y":30, "transform": "rotateX(-30deg)", "scale":1.8, "index":7},
{"x":81, "y":35, "transform": "rotateX(-20deg)", "scale":1.9, "index":8},
{"x":81, "y":40, "transform": "rotateX(-10deg)", "scale":1.9, "index":9},
{"x":81, "y":45, "transform": "rotateX(0deg)", "scale":2.1, "index":10},
{"x":81, "y":50, "transform": "rotateX(5deg)", "scale":1.9, "index":9},
{"x":81, "y":55, "transform": "rotateX(10deg)", "scale":1.9, "index":8},
{"x":81, "y":60, "transform": "rotateX(15deg)", "scale":1.8, "index":7},
{"x":81, "y":65, "transform": "rotateX(20deg)", "scale":1.8, "index":6},
{"x":81, "y":70, "transform": "rotateX(25deg)", "scale":1.7, "index":5},
{"x":81, "y":75, "transform": "rotateX(30deg)", "scale":1.7, "index":4},
{"x":81, "y":80, "transform": "rotateX(35deg)", "scale":1.6, "index":3},
{"x":81, "y":85, "transform": "rotateX(40deg)", "scale":1.6, "index":2},
{"x":81, "y":90, "transform": "rotateX(45deg)", "scale":0, "index":1}
  ]
}

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [WikiZ] Tout ce qu'il faut savoir sur Zspin

Message par Porko » 06 oct. 2015 - 22:18

si ta wheel est à droite mets

Code : Tout sélectionner

"perspective-origin": "90% 700px"
Si elle est à gauche

Code : Tout sélectionner

"perspective-origin": "10% 700px"

Enfin ajustes...
Dernière modification par Porko le 06 oct. 2015 - 22:36, modifié 1 fois.

Répondre

Revenir à « Tutorials »