[DEV in PROGRESS]Box verticale 16/9 sur Zspin

Medias, themes, and more for zspin.

Modérateurs : vik, Modérateurs

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Créer une Box pour jeux verticaux avec Zspin

Message par camarade35 » 03 juil. 2017 - 08:18

j'ai rédité et préparer le code ma poule, le voilà : https://codepen.io/camarade35/pen/MoVMaN" onclick="window.open(this.href);return false;
porko a écrit :Comment lui dire.... width: %zspin-speed%vh; ??? <=== pas test
ça je vais jeter un œil dans la journée ;)
préservation du patrimoine vidéoludique et de notre planète

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 03 juil. 2017 - 12:51

H ouaip! Bien ton code!

Faudra que je vois comment lier les valeurs du JS au xml mais ça pète! Et c'es exactement le truc que voulait biloon

Merci mec t'assure à donf!

EDIT: c bon vik m'a montré ! Je test ça dès que je peux
Dernière modification par Porko le 03 juil. 2017 - 13:53, modifié 1 fois.
Raison : Et

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Créer une Box pour jeux verticaux avec Zspin

Message par camarade35 » 03 juil. 2017 - 14:49

Porko a écrit : EDIT: c bon vik m'a montré ! Je test ça dès que je peux
si tu peux partager, car perso mon chart disparait tout de suite après son apparition
préservation du patrimoine vidéoludique et de notre planète

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 03 juil. 2017 - 15:18

G pas encore testé ton chart... Il m'a juste montrer comment appeler les données du XML dans le js

Avatar de l’utilisateur
tutor59
Virtuose
Virtuose
Messages : 1270
Inscription : 08 oct. 2014 - 01:00
A remercié : 119 fois
A été remercié : 176 fois

Re: Créer une Box pour jeux verticaux avec Zspin

Message par tutor59 » 03 juil. 2017 - 17:46

Punaise ! Alors là, respect, vous assurez !
Je ravale ma langue pour arrêter de baver sur le clavier :)

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 03 juil. 2017 - 19:18

Je tente de mettre le morceau de js dans la page mais ça chie...

Code : Tout sélectionner

<script type="text/javascript">
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx,{
"type":"doughnut",
  "data":{"labels":["Visibilité","Graphisme","Rapidité","Bande-son"],
 "datasets":[{"label":"My First Dataset",
 "data":[17,50,25,50],
 "backgroundColor":["rgb(233,76,59)",
 "rgb(54,152,221)","rgb(242,195,19)","rgb(24,189,155)"
                     
    ]}
  ]}
});
</script>

CAMAAAAaaaAAaaaAAADEEEEUUUUUUU!

How it works? kè ke cé ke je fé mal?

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Créer une Box pour jeux verticaux avec Zspin

Message par camarade35 » 03 juil. 2017 - 19:29

bah si j'ai pas le code complet ^^

Sinon oublie pas la div qui contient le canvas et les valeurs de la div

.myChartDiv {
max-width: 30%;
max-height: 30%;
}

la partie script après le body

Sinon keskichi ?
préservation du patrimoine vidéoludique et de notre planète

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 03 juil. 2017 - 19:47

Bah oui ya tout! Et aux bons endroits! (a priori)
Et ca marche ni sur navigateur ni sous Zspin

J'ai tenté de créer un fichier js que j'appel, j'ai tenter le script direct.... Et pleins de trucs mais que dalle de nib prout caca tshuintshuin

look
https://pastebin.com/dg476C8G

ça c'est le html avec le js dedans

biloon
Connaisseur
Connaisseur
Messages : 478
Inscription : 09 août 2014 - 01:00
Localisation : Saint-Brieuc
A remercié : 58 fois
A été remercié : 23 fois

Re: Créer une Box pour jeux verticaux avec Zspin

Message par biloon » 03 juil. 2017 - 20:10

YO les gars ,
Je me suis fais cambrioler dans la nuit...voiture, argent la totale....LOOZ

bref je reviens dans une semaine avec ce qu'il faut pour finir le projet
désolé

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Créer une Box pour jeux verticaux avec Zspin

Message par camarade35 » 03 juil. 2017 - 20:23

oh merde Oo, courage @biloon

sinon, @porko je dirais

Code : Tout sélectionner

<script src="assets/Chart.min.js"></script>
et surtout : Le fichier qui va bien ^^
préservation du patrimoine vidéoludique et de notre planète

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 03 juil. 2017 - 21:05

@biloon, SHIIIIT! je suis vraiment désolé pour toi!

Yep camarade! a marche merki, faut que je lise la doc pour paramétrer l'affichage
Là comme ça brut j'y bite pas grand chose

Merci en tout cas ça pète bien!

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 05 juil. 2017 - 13:02

@biloon
Ce serait pas plus pertinent ça?

Image

C'est le mm code en fait (merci camarade)

Là on voit la différence entre toutes les valeur à 1% et tout à 100%... Que sur le cercles l'affichage sera identique

PS: animation, couleur, traits... Tout se paramètre

biloon
Connaisseur
Connaisseur
Messages : 478
Inscription : 09 août 2014 - 01:00
Localisation : Saint-Brieuc
A remercié : 58 fois
A été remercié : 23 fois

Re: Créer une Box pour jeux verticaux avec Zspin

Message par biloon » 05 juil. 2017 - 18:10

Yo Porko !
J'avais déjà essayé avec le motif radar mais c'etait pas très lisible pour l'utilisateur. :: pas assez graphique mais super précis :)
De toute façon on va passer au cribles tous les shumps Verticaux et on aura suffisamment de données pour écrire une bible sur le Shumps aux editions HFS ! :mrgreen:
la on devra utiliser les radars ! ahahah

Moi je trouvais les cercles cools parce que c'est très graphique et coloré !!

L'idée c’était surtout de voir la dominante du jeu en se basant sur :
** La vitesse de défilement)
** le nombre d'ennemis et de boulette à l'écran
** La complexité des partens

Mais je suis pas contre un rajout de caractéristiques, ni contre un radar pour voir ce que ca peut donner une fois codé ! il faut juste que ça soit joli en fait ^^ uj

et surtot Merci encore PORKO pour ton taf la dessus...
C'est en train de devenir vraiment énorme ce projet

Avatar de l’utilisateur
tutor59
Virtuose
Virtuose
Messages : 1270
Inscription : 08 oct. 2014 - 01:00
A remercié : 119 fois
A été remercié : 176 fois

Re: Créer une Box pour jeux verticaux avec Zspin

Message par tutor59 » 06 juil. 2017 - 20:34

Et faire quelque chose comma ça qui mixerait les deux approches ?

Image

La taille des parts de camembert restent constantes, mais plus la portion augmente vers le centre et plus la valeur est élevée.

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Créer une Box pour jeux verticaux avec Zspin

Message par camarade35 » 06 juil. 2017 - 20:50

@porko

http://www.chartjs.org/samples/latest/c ... -area.html" onclick="window.open(this.href);return false;
préservation du patrimoine vidéoludique et de notre planète

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 06 juil. 2017 - 20:52

Oui je l'ai test celui lâ^^

biloon
Connaisseur
Connaisseur
Messages : 478
Inscription : 09 août 2014 - 01:00
Localisation : Saint-Brieuc
A remercié : 58 fois
A été remercié : 23 fois

Re: Créer une Box pour jeux verticaux avec Zspin

Message par biloon » 06 juil. 2017 - 22:53

camarade35 a écrit :@porko

http://www.chartjs.org/samples/latest/c ... -area.html" onclick="window.open(this.href);return false;
c'est pas mal ça :)

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: Créer une Box pour jeux verticaux avec Zspin

Message par Porko » 08 juil. 2017 - 09:12

Glop!

Test avec 3 jeux en mode portrait


[BBvideo 560,340][/BBvideo]

Si vous voulez tester:

Download l'archive et décompréssez ====> https://mega.nz/#!KRYCHRaB!hfL8lNC7bn46 ... oMC5eiQBCg
récuperez la version de Zspin qui convient à votre OS ====> releases-f115/beta-test-t7243.html#p109555
et foutez le dans le premier dossier nommé ZspinShumpBox

Lancez, parametrez et testez (ya pas de jeux c juste le frontend)

Si vous êtes en mode paysage (normal quoi) virez le plein écran et redimentionnez pour avoir les bonnes proportions (c juste plus fluide sur l'anim des wheels)

Merci @biloon pour le graphisme et l'idée orginale
Merci @camarade35 pour le chart
Merci @vik pour l'aide au code
Merci @jer570 pour le database

Pour les fucking portes faut me filer des trucs... Ca c'est pour le test, ça va pas avec le reste
Je vais voir à animer les differentes apparitions d'items
L'encart en bas à droite affichera des images en boucle instruction cards, artworks...
Et faut que j'optimise le theme pour qu'il soit léger et commenter le code

EDIT: changement du nom du sujet pour le coup

biloon
Connaisseur
Connaisseur
Messages : 478
Inscription : 09 août 2014 - 01:00
Localisation : Saint-Brieuc
A remercié : 58 fois
A été remercié : 23 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par biloon » 08 juil. 2017 - 10:30

YES PORKO !
Dès que je récupère un ordinateur je te fais les portes !
Super taf encore une fois :)
J'ai hate de voir la suite des animations :)

Quelques remarques :
-Je ne suis pas trop fan finalement de ce camembert : - Penses tu que tu pourrais mettre une option pour choisir le type de graphique ? du genre : CERCLE / HISTOGRAMME / RADAR

- Il faudrait se pencher sur ce écran noir de transition pour que le fond reste statique :) - parce que une fois ce truc résolu ca sera énorme

BIG UP 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: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Porko » 08 juil. 2017 - 12:54

Alors si tu veux la wheel fixe prends celle là
https://mega.nz/#!fNhBSY5A!f7muSqBVdXaS ... TjNCEDKx1w


pour passer en un autre type de chart, toi tu veux le Doughnut
Image

il faut que dans le script tu changes le type et virer une option
origin:

Code : Tout sélectionner

<script type="text/javascript">
function putChart() {
  var diff = parseInt($('.zspin-difficulty').text());
  var visi = parseInt($('.zspin-visibility').text());
  var graph = parseInt($('.zspin-graphics').text());
  var speed = parseInt($('.zspin-speed').text());
  var sound = parseInt($('.zspin-soundtrack').text());
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
      type: "polarArea",

      options: {
        scale:{
          display : false,
          },
        legend: {
          display: false,
          }
        },
      data: {
          labels: ["Visibilité", "Graphisme", "Rapidité", "Bande-son", "difficulté"],
          datasets: [{
                  label: "My First Dataset",
                  data: [visi, graph, speed, sound, diff],
                  borderWidth: "0",
                  borderColor: "rgb(0,0,0)",
                  backgroundColor:[
                  "rgb(0,0,204)",
                  "rgb(0,204,0)",
                  "rgb(255,128,0)",
                  "rgb(204,0,204)",
                  "rgb(204,0,0)"
                  ]

              }

          ]

      }

  });
}
setTimeout(function(){ putChart();}, 1000);


</script>
par:

Code : Tout sélectionner

<script type="text/javascript">
function putChart() {
  var diff = parseInt($('.zspin-difficulty').text());
  var visi = parseInt($('.zspin-visibility').text());
  var graph = parseInt($('.zspin-graphics').text());
  var speed = parseInt($('.zspin-speed').text());
  var sound = parseInt($('.zspin-soundtrack').text());
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
      type: "doughnut",

      options: {

        legend: {
          display: false,
          }
        },
      data: {
          labels: ["Visibilité", "Graphisme", "Rapidité", "Bande-son", "difficulté"],
          datasets: [{
                  label: "My First Dataset",
                  data: [visi, graph, speed, sound, diff],
                  borderWidth: "0",
                  borderColor: "rgb(0,0,0)",
                  backgroundColor:[
                  "rgb(0,0,204)",
                  "rgb(0,204,0)",
                  "rgb(255,128,0)",
                  "rgb(204,0,204)",
                  "rgb(204,0,0)"
                  ]

              }

          ]

      }

  });
}
setTimeout(function(){ putChart();}, 1000);


</script>
le cercle n'a pas les mêmes proprtions donc il faudra ajuster la taille ici sur le "width" le heigth ne sert pas je crois (faudra que je le vire au moment de l'optimisation)

Code : Tout sélectionner

<div class="myChartDiv"style="position: absolute; height:5vh; width:15vh"><canvas id="myChart"></canvas></div>
<div class="year zspin-year zspin_d"></div>
et pour le placement c'est là en jouant sur top et left

Code : Tout sélectionner

.myChartDiv {
  position: absolute;
  width: 30vh;
  top: 63vh;
  left: 6vh;
  z-index: 4;
}
Pour etre précis tu peux mettre des chiffre après la virgule (enfin le point)

ex:

Code : Tout sélectionner

 top: 63.35vh;

Répondre

Revenir à « Medias »