[Tutoriel]Long Scrolling + Exemple de données sur un GRP

Bienvenue dans le tuto du long scrolling.

I)INTRO, PRINCIPE
Le scrolling est traduit sur l'écran par le décor qui bouge en fonction d'une direction.
Cette définition nous indique que l'on aura besoin d'appuyer sur les boutons de directions
et de la commande BGOFS.
Avec la direction, on va donc modifier la coordonnée du décor, ce qui se traduit par:

IF BUTTON()==4 THEN XB=XB-2 'XB est la coordonnées X du décor
IF BUTTON()==8 THEN XB=XB+2
BGOFS 0,XB,YB 'Ne pas oublier que l'on peut avoir 2 calques pour le décor (BGOFS 1,XB,YB)
VSYNC 1 'Pour un meilleur affichage du mouvement

Pas très complexe pour l'instant n'est-ce pas ? On a produit ici un scrolling horizontal
mais le problème qui se pose, est le décor qui tourne en boucle tous les 64 blocs.
(soit la taille d'un SCR).

(Pour vous entraîner, essayez de faire un scrolling vertical)

II)LONG SCROLLING
a)ASSIGNER LE DECOR A UN GROUPE DE VARIABLE
Comment faire pour avoir un plus long scrolling et dépasser cette limite ?
Etant donné qu'un SCR a une longueur de deux écrans, une partie est donc cachée,
on peut donc dessiner du décor qui donneront l'impression que le décor est immense.
On aura donc besoin de savoir ce que représente chaque coordonnées du décor, pour
cela on utilisera un groupe de variable à deux dimensions: par exemple BG(XBG,YBG).
Pour dessiner le décor on utilisera la fonction BGPUT mais dans sa version avancée
qui regroupe l'ID, la palette, la rotation horizontale et verticale en une donnée écran.
Cette donnée écran sera enregistré dans BG(XBG,YBG).

En premier lieu, on doit enregistrer le décor que l'on souhaite dans le groupe de variable BG(XBG,YBG):
DIM BG(1000,64) 'On créer le groupe de variables BG(XBG,YBG) de longueur 999 et de hauteur 63
               'taille de notre décor par exemple
@DONNEESECRAN 'On mettra les données écran dans du data
DATA 1000,966,...... 'Faites attention à la limite de Petit Computer sur la longueur d'écriture

RESTORE @DONNEESECRAN 'Toujours bien de le mettre pour savoir ce qu'on va lire avec READ
FOR XBG=0 TO 999 'Démarrer avec XBG signifie que l'on va assigner les données écran par ligne verticale
FOR YBG=0 TO 63   'les données écran commenceront donc à être assignées à BG(0,YBG),
                'penser à les écrire de cette manière dans @DONNEESECRAN
                'Vous pouvez très bien le faire d'une autre manière.
READ BG(XBG,YBG)
NEXT
NEXT

La difficulté ici est de savoir à quoi correspondent les données écran de notre décor.
La méthode simple mais longue et laborieuse serait de créer plusieurs SCR de votre décor,
de le charger (LOAD) et de faire BGREAD en version avancé pour chaque coordonnées.
Ex: LOAD"SCR0:MONDECOR"   'charge le screen
   BGREAD(0,0,0), DONNEE 'lit les données écran et les enregistre dans la variable DONNEE
   ?DONNEE  'Affiche la première donnée à recopier dans le DATA adéquate
   BGREAD(0,0,1),DONNEE  'on recommence avec la prochaine donnée écran
   ...

Une autre méthode un peu complexe mais automatique, serait toujours de créer vos SCR de
votre décor, mais cette fois-ci on enregistrerait les données écran dans un GRP qui remplacera
toute la partie DATA. C'est pour cela que je ne la détaillerai pas ici mais à la fin.

Bien maintenant que l'on a notre décor enregistré dans notre groupe de variable, il est temps
de l'afficher.

b)AFFICHER ET DESSINER NOTRE DECOR
Pour commencer on doit afficher le décor présent à l'écran, rien de plus facile:
FOR XBG=0 TO 32 'On affiche un peu plus que la taille de l'écran
FOR YBG=0 TO 63 'On affiche le max en YBG car la limite d'un SCR n'est pas dépassée
BGPUT 0,XBG,YBG,BG(XBG,YBG) 'On utilise le groupe de variable que l'on a assigné juste avant
NEXT
NEXT

Notre décor est planté, il est temps de le dessiner lorsque l'on va se déplacer,
on le dessinera hors écran afin de donner l'illusion que l'on se déplace sur une
longue page:
@MOUVEMENT
XBG=FLOOR(XB/8 ) 'un bloc correspond à un carré de 8 pixels de côté
IF BUTTON()==4 THEN GOSUB @DESSING
IF BUTTON()==8 THEN GOSUB @DESSIND
BGOFS 0,XB,YB
VSYNC 1
GOTO @MOUVEMENT

@DESSING 'On dessine à gauche hors écran c'est à dire à XBG-1
IF XBG-1<0 THEN RETURN  'évite les erreurs et bloque le scrolling
FOR IY=0 TO 63
BGPUT 0,XBG-1,YI,BG(XBG-1,IY) 'dessine à gauche une ligne verticale de décor
NEXT
XB=XB-2 'Pour le mouvement du décor
RETURN

@DESSIND 'On dessine à droite hors écran c'est à dire à XBG+32
IF XBG+32>999 THEN RETURN  'évite les erreurs et bloque le scrolling
FOR IY=0 TO 63
BGPUT 0,XBG+32,YI,BG(XBG+32,IY) 'dessine à droite une ligne verticale de décor
NEXT
XB=XB+2 'Pour le mouvement du décor
RETURN

Et voilà, nous avons réalisé un long scrolling horizontal où l'on peut parcourir
notre décor de gauche à droite sur toute sa longueur.

(Pour vous entraîner, essayez de l'adapter à un scrolling vertical)

III)CONCLUSION, RAPPELS
Ce tuto touche à sa fin, j'espère que vous avez compris la méthode à suivre.
N'oubliez pas que votre écran va de 0 à 255 pixels (soit de 0 à 31 blocs) de longueur
et de 0 à 191 pixels (soit de 0 à 23 blocs) de hauteur.
N'hésitez pas à me dire si quelque chose cloche dans le tuto ou si vous avez des
questions.
Essayez maintenant d'ajouter un personnage qui s'animera lors des déplacements,
voire qui prendra le relais des déplacements lorsque le scrolling sera terminé afin
d'atteindre les bords du décor, mais tout ceci est une autre histoire...

CODE EN ENTIER:

BONUS: DONNEES SUR GRP
Comment mettre des données sur un GRP ?
Un GRP est un format image de Petit Computer en 256 couleurs d'une taille de 256
sur 192 pixels. Nous avons donc 49152 points de couleurs à notre disposition.
Ces couleurs sont notées de 0 à 255 et on peut le savoir grace à la
commande GSPOIT. Ces numéros, transformés en hexadécimal, seront composés de
deux caractères au maximum.
Les données écran du tuto peuvent être représenté soit par une variable numérique,
soit par une variable alphanumérique qui sera en hexadécimal d'une longueur de 4 caractères.
Sachant cela, cela veut dire qu'il nous faut deux pixels pour cacher une donnée écran.
Vous voyez où je veux en venir maintenant ?
Et oui, il vous faudra créer un logiciel qui s'occupera de lire les données écran d'un SCR
et les convertira en points colorés sur un GRP.

Comment convertir des données écran en points colorés ?
C'est très simple en fait. Chargez votre SCR.
Puis il faudra mettre deux boucles de FOR, une pour l'axe des X et une autre
pour l'axe des Y (ou inversement c'est comme vous voulez).
Si vous utilisez la taille maximale du SCR ils iront de 0 à 63.
On utilisera ensuite la commande BGREAD en version avancé avec une variable alphanumérique
pour enregistrer les données écran.
Un pixel ne contenant que deux caractères hexadécimal, il faut donc diviser les données écran
en deux avec la commande LEFT et RIGHT pour la seconde partie.
On enregistre ensuite ces deux parties dans deux variables alphanumérique en leur rajoutant
devant chacune d'entre elles les caractères "&H" afin de pouvoir les transformer en valeur
valeur numérique pour les dessiner sur un GRP avec la commande GPSET, une fois pour la
partie de gauche et une pour la partie de droite.
(N'oubliez pas de changer de pixel entre les deux et de faire attention aux limites).
Voici ce que ça donne en code:

LOAD"SCR0:MON_SCR",0

FOR Y=0 TO 63
FOR X=0 TO 63
BGREAD(0,X,Y),DONNEE$
L$="&H"+LEFT$(DONNEE$,2):L=VAL(L$)
R$="&H"+LEFT$(DONNEE$,2):R=VAL(R$)
GPSET XG,YG,L  'XG et YG sont les coordonnées sur le GRP
XG=XG+1 'Change de pixel sur l'axe des X
IF XG>255 THEN XG=0:YG=YG+1 'Si la première ligne est complète on change sur l'axe des Y
IF YG>191 THEN ?"Le GRP est plein.":WAIT 60:END 'Vérifie si le GRP n'a plu de place
GPSET XG,YG,R
XG=XG+1
IF XG>255 THEN XG=0:YG=YG+1
IF YG>191 THEN ?"Le GRP est rempli.":WAIT 60:END
NEXT
NEXT

Maintenant il ne vous reste plus qu'à décoder le GRP pour enregistrer les données écran
dans le groupe de variables BG(XBG,YBG).
Chargez votre GRP.
Puis on débute avec nos deux boucles FOR pour l'axe des X et des Y (ou inversement).
Ensuite il faut retouver notre valeur hexadécimale de 4 caractères.
On va donc lire le premier pixel avec GSPOIT, le transformer en valeur hexadécimale en
s'assurant qu'il aura une longueur de 2. La partie de gauche étant faite, on change de
pixel et on fait la partie de droite de la même manière.
On réunit les deux parties en une seule et on le transforme en valeur numérique pour
l'enregistrer dans notre groupe de variable BG(XBG,YBG) qui faudra nommer adéquatement.
On change ensuite de pixel et la boucle recommence.
Si vous avez enregistrer plusieurs données de différents SCR dans le GRP, il faudra
refaire appel à ce morceau de code pour la suite.
Voici ce que ça donne en code:

LOAD"GRP0:MONGRP",0

FOR I=0 TO 5  'Si vous avez plusieurs SCR dans le GRP, ici c'est 6 SCR
IBMIN=64*I:IBMAX=63+64*I 'Calcul du minimum et du max des X des SCR (0à63, 64à127...)
GOSUB @GRP_VARIABLE      'afin de pouvoir les coller bout à bout.
NEXT
...

@GRP_VARIABLE
FOR JB=0 TO 63
FOR IB=IBMIN TO IBMAX
L=GSPOIT(XG,YG):L$=HEX$(L,2)
XG=XG+1
IF XG>255 THEN XG=0:YG=YG+1
R=GSPOIT(XG,YG):R$=HEX$(R,2)
DONNEE$="&H"+L$+R$:BG(IB,JB)=VAL(DONNEE$)
XG=XG+1
IF XG>255 THEN XG=0:YG=YG+1
NEXT
NEXT
RETURN

Félicitation d'être arrivé jusqu'ici, le tuto est terminé.
Essayez d'intégrer ça à votre scrolling, c'est certes un peu plus compliqué à comprendre
mais beaucoup plus facile pour la gestion des données. (en fait vous allez tous faire de
cette manière étant donné que la méthode avec les DATA est vraiment trop longue à faire)
Merci d'avoir suivi ce tutoriel.

PS: Si vous voulez mon utilitaire qui crée un GRP de données de SCR, il est disponible
sur le forum à cette adresse : Cliquez ici

Un long tutoriel pour un long scrolling 
Blague à part, j'ai appris beaucoup de choses (et ça met un peu de vie sur le forum aussi ), merci pour ce beau tutoriel et l'utilitaire qui va avec

Content de l'entendre ^^.
En même temps il m'a permis à mieux comprendre à quoi servait le deuxième élément de la fonction HEX$.
J'avais beaucoup galéré pour comprendre le long scrolling en début d'année et mettre des données sur un GRP, alors autant le partager avec la communauté.
J'espère qu'il sera assez clair pour la majorité