Comme faire bouger une carte et un sprite?

Général

Martisse

il y a 5 ans

Bonjour, j'ai créé une carte grâce a tiled (24064) puis un personnage de (76). J'aimerais savoir comment faire pour faire bouger la carte et le personnage comme dans le jeu Cats ans coin. Pour l'instant j'ai codé que quand que on appui sur gauche, la carte va a droite, si on appui sur droite la carte va a gauche. Or cette méthode ne fonctionne pas bien.

Pouvez vous m'aider ?

Steph

NEW il y a 5 ans

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.

chris-scientist

NEW il y a 5 ans

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).

Martisse

il y a 5 ans

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

Martisse

NEW il y a 5 ans

chris-scientist chris-scientist

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

chris-scientist

il y a 5 ans

N'hésite pas à poser des questions !

chris-scientist

NEW il y a 5 ans

Martisse Martisse

N'hésite pas à poser des questions !

deeph

NEW il y a 5 ans

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

Martisse

il y a 5 ans

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

jicehel

NEW il y a 5 ans

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...

Martisse

il y a 5 ans

cela devrait m'aider; merci

Martisse

NEW il y a 5 ans

deeph deeph

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

Martisse

NEW il y a 5 ans

jicehel jicehel

cela devrait m'aider; merci

Codnpix

NEW il y a 5 ans

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 !

Steph

il y a 5 ans

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

Martisse

il y a 5 ans

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

Steph

NEW il y a 5 ans

Codnpix Codnpix

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

Codnpix

il y a 5 ans

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

Grave ! J'essaye en tout cas ^^.

Codnpix

NEW il y a 5 ans

Steph Steph

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

Grave ! J'essaye en tout cas ^^.

Martisse

NEW il y a 5 ans

Codnpix Codnpix

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

Steph

il y a 5 ans

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

Steph

NEW il y a 5 ans

Martisse Martisse

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

Martisse

il y a 5 ans

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

Martisse

NEW il y a 5 ans

Steph Steph

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

Steph

il y a 5 ans

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

Steph

NEW il y a 5 ans

Martisse Martisse

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

Martisse

il y a 5 ans

Ok. Je ferai ça ce soir. Car j'ai des horaires de pc.