Comme faire bouger une carte et un sprite?

Des tutoriels très complets sur le sujet sont actuellement en préparation au sein de l'Académie... encore un petit peu de patience :-)

En attendant, tu peux étudier le code open source des jeux qui ont été publiés et qui utilisent cette technique.

Tu peux regarder le workshop Apprenez la programmation orientée objet avec Sokoban, tu y trouveras une première approche de la gestion d'une "caméra" et de la gestion des déplacements du personnage. Cependant, le workshop fait usage de la programmation orientée objet (avec des classes, méthodes, etc).

Sinon comme l'a dit Steph, des workshops sont en préparation et ces notions seront abordées en programmation procédurale (dans un premier temps).

Je vai y jeter un œil, mais je trouve ça un peu complexe.

N'hésite pas à poser des questions !

Autrement j'avais présenté ma façon de faire (en gros) avec Picomon ici : https://gamebuino.com/fr/community/topic/image-et-map#c7811

Je ne te garantie pas que ça t'aide mais je l'espère. J'avais fais un tuto sur le Sokoban un peu avant Chris-scientist mais en non POO, si ça peut t'aider et t'apporter un angle différent, tu le trouveras ici:

https://gamebuino.com/fr/creations/sokoban-partie-1-preparons-notre-jeu

https://gamebuino.com/fr/creations/sokoban-partie-2-ajoutons-les-graphismes

https://gamebuino.com/fr/creations/sokoban-partie-3-creons-la-vie

Si ça te dis, essaye de suivre ces 3 parties, la partie 1 à priori ne te servira à rien d'autre qu'à mieux comprendre l’enchaînement avec la partie 2 car tu as déjà fait cette partie d'après ce que j'ai compris, mais la partie 2 d'expliquera comment intégrer tes sprites et la 3 comment te déplacer et les afficher. Si ce n'est pas clair, fais moi un retour et j'essayerais d'expliquer plus clairement.  Encore une fois, ce sont des tutos qui datent un peu et une série de tutos arrivent qui les reprendront sous forme de Workshop avec des étapes plus claires, mais en attendant, si ça peut t'aider...

j'ai déja essayé mais je cherche une méthode plus facile.

cela devrait m'aider; merci

Salut, je suis sur une problématique similaire pour un projet perso, en gros l'idée que j'ai utilisée est que le sprite a des coordonnées relatives à la map (dont l'origine est 0, 0) et la caméra qui est en fait l'écran dessine l'ensemble des images a des coordonnées décalées en fonction de la position du sprite. Je ne sais pas si c'est très clair donc voici un petit extrait de mon code : 

un controlleur récupère les entrées et les passe au modèle du sprite : 

void GameController::getInputs() {
//...
  if(gb.buttons.repeat(BUTTON_RIGHT, 1)){
    this->character->reqWalkRight();
  }
  if(gb.buttons.repeat(BUTTON_LEFT, 1)){
    this->character->reqWalkLeft();
  }
  if(gb.buttons.pressed(BUTTON_A)) {
    this->character->reqJump();
  }
  if(gb.buttons.repeat(BUTTON_DOWN, 1)) {
    this->character->reqFall();
  }
  if(gb.buttons.released(BUTTON_LEFT) || gb.buttons.released(BUTTON_RIGHT)) {
    this->character->reqStand();
  }

  this->character->applyGravity();//gravity is an input, kind of...

}

Du côté du sprite les inputs sont traités comme ça :

void Character::init() {
  this->reqXMarker = 'n';
  this->setPosition(40, SPACE_H - CHARACTER_H);//tmp
}

void Character::reqWalkRight() {
  this->reqXMarker = 'r';
}

void Character::reqWalkLeft() {
  this->reqXMarker = 'l';
}

void Character::reqStand() {
  this->reqXMarker = 'n';
}

Puis il met sa position est mise à jour en conséquence : 

void Character::updatePos() {

  if(this->reqXMarker == 'r') {
    this->vx = 1;
  } else if (this->reqXMarker == 'l') {
    this->vx = -1;
  } else if (this->reqXMarker == 'n') {
    this->vx = 0;
  }

 //...
//je ne mets pas tout ici car c'est encore un peu en cours de développement, il faut gérer les collisions etc
//mais pour la partie déplacements c'est à peu près opé.

}

Ensuite l'astuce se situe plutôt au niveau de la vue, donc de ce qu'on pourrait appeler la caméra :

le calcul qui permet de dessiner la vue à l'endroit du sprite est le suivant : 

void View::followCharacter(float charX, float charY) {
  if (charX + CHARACTER_W / 2 <= SCREEN_W / 2) this->setCameraPosX(0);
  else if (charX + CHARACTER_W / 2 >= SPACE_W - SCREEN_W / 2) this->setCameraPosX(-SPACE_W + SCREEN_W);
  else this->setCameraPosX(SCREEN_W / 2 - charX - CHARACTER_W / 2);

  if (charY + CHARACTER_H / 2 >= DECOR_TILE_H - SCREEN_H / 2) this->setCameraPosY(-(DECOR_TILE_H - SCREEN_H));
  else if (charY + CHARACTER_H / 2 <= SCREEN_H / 2) this->setCameraPosY(0);
  else this->setCameraPosY(SCREEN_H / 2 - charY - CHARACTER_H / 2);
}

Puis la fonction draw affiche tout ça avec les valeurs précédemment calculées : 

void View::draw(float charX, float charY, Space* space) {
  this->followCharacter(charX, charY);

  gb.display.clear();
  //background
  for (uint8_t tile = 0; tile < 8; tile++) {
    gb.display.drawImage(this->cameraPosX + tile * BACKGROUND_TILE_W, 0 / 1.5, backgrounds[this->spaceIndex]);
  }
  //decorPart1
  gb.display.drawImage(this->cameraPosX, this->cameraPosY, decorMaps[this->spaceIndex][0]);
  //decorPart2
  gb.display.drawImage(this->cameraPosX + DECOR_TILE_W, this->cameraPosY, decorMaps[this->spaceIndex][1]);

  //character
  gb.display.drawImage(this->cameraPosX + charX, this->cameraPosY + charY, charSprite);
}

Voilà, je ne sais pas si c'est très explicite car il y a des parties du code que je ne prend pas le temps de détailler et il en manque pas mal de morceaux mais je pense que ça résume pas mal un exemple de ce que tu cherches à faire. J'espère que ça te donnera un peu d'inspiration :).

Bon courage !

Ha Ha Ha ... je vois que tu as adopté la POO et l’architecture MVC ;-)

Ha Ha Ha ... je vois que tu as adopté la POO et l’architecture MVC ;-)

Grave ! J'essaye en tout cas ^^.

Je vais regarder ça. C'est ce que j'ai essayé de faire en beaucoup, beaucoup plus simplifié...

Tu peux aussi nous poster ton code sur Gist pour qu'on puisse l'examiner et t'apporter une solution appropriée ;-)

gist c'est GitHub? Ou c'est une autre méthode

C'est apparenté oui... il te faut un compte GitHub pour pouvoir poster un code à partager
Jette un oeil sur la Doc.