SpriteKit Advanced - Comment construire un jeu 2,5D (Partie I)

Intro

Cet article concerne l'évolution graphique de Raft Challenge du prototype au produit final. C’est destiné aux personnes qui envisagent de créer leur propre jeu avec des graphismes comme Raft, mais qui ne savent pas exactement comment commencer.

Le début du défi radeau

Raft Challenge est né lors du premier hackathon organisé par All In Mobile. L'idée était de faire un jeu où un joueur évite les obstacles. Nous voulions garder les choses aussi simples que possible.

Après le week-end, nous avions un prototype qui ressemblait à ceci:

Raft Challenge a remporté le hackathon. La société a annoncé qu’elle ferait les ressources nécessaires pour améliorer le jeu.

Faisons-le 2,5D!

Au début du projet, Raft avait les graphismes les plus simples possibles. Une vue était directement sur une texture de sol plat, avec des cercles colorés qui indiquaient le joueur et les ennemis. C'était beau et aussi simple que le code ci-dessous. Ensuite, notre graphiste est venu et a tout gâché. Il a dit: “Faisons-le 2,5D!”. Le défi a été accepté et l'animation ci-dessus a été le résultat.

Après le hackathon, il s'est présenté une fois de plus. Cette fois, c'était plus qu'une phrase.

C'était un sourire diabolique et cette vidéo:

Perspective expliquée

Ok, laisse tomber la loi :-). J'ai voulu lui donner le sentiment qu'il est en charge. Mais je suis le patron ici! La perspective est facile à implémenter dans le code, quel que soit le moteur 2D utilisé.

Premièrement, nous devons déterminer où nous voulons placer le point de fuite. L'exemple ci-dessous montre ce point au centre de la toile.

Raft Challenge a ce point dans la moitié supérieure de l’écran, car le ciel et tout ce qui est au dessus n’est pas aussi important que les obstacles sur la rivière.

Comment sont fabriqués les sprites eux-mêmes? Cela peut sembler évident pour une personne ayant une formation artistique, mais ce n’est pas nécessairement évident pour une personne technique.

Il y a deux règles:

  • Les pièces mobiles doivent être dessinées le long des lignes d'assistance, comme indiqué ci-dessus.
    Toutes ces lignes se croisent au point de fuite

Remarque: la partie côtière n’atteint pas le point de fuite. Il s’arrête quelque part au milieu, laissant la zone transparente derrière.

  • Cette zone vide entre le graphique et le point de fuite a un objectif important
    Il contiendra des éléments plus éloignés.

Ces pièces sont fabriquées en appliquant une échelle deux fois plus petite pour chaque étape. L'image résultante doit être transparente si la texture est bien faite.

Assemblage de la scène

Après avoir préparé tous nos actifs, nous devons tous les mettre en scène.

Voyons à quoi cela ressemble dans Raft Challenge.

En partant du bas:

  1. Couches de fond
    Contexte
    Herbe
    Fond de brouillard
    Soleil
    Les montagnes
    Ligne d'horizon
  • Ces couches sont toutes statiques elles ne bougent pas
  • Fond agit pour le ciel et l'eau
  • Le fond est un dégradé simple
    Il est étiré pour remplir l’écran complet de l’appareil.
    Le rapport d'aspect est ignoré
  • Nous pouvons fusionner des couches autres que l’arrière-plan pour améliorer les performances, à moins de modifier certaines propriétés.
  • Nous pouvons déplacer le soleil pendant le jeu
     ou remplacer les montagnes pour quelque chose de différent

2. Calques de perspective
Arbres à reflets
Côte
Obstacles

  • Pour la clarté de l'image ci-dessus, les couches de contenu similaire ont été regroupées.
    Il y avait:
    2 couches d'obstacles
    8 couches de côte
    8 couches d'arbres avec des reflets
  • Ces couches sont multipliées par 2 lorsqu'un joueur avance
  • L'ordre de ces couches dépend de
    distance
    les plus proches sont au top
    priorité
    Obstacle> Côte> Arbres

3. caractère

  • Si un obstacle est dans la position la plus proche possible, il peut avoir une position z plus haute que le personnage lui-même.
    Dans ce cas, l'obstacle couvre le personnage, ce qui est souhaitable

4. interface graphique

  • De bons graphismes devraient dépendre d'illusions et de trucs au lieu de matériel

Résumé

Cet article devrait nous donner une idée de la manière d’aborder le problème de la création d’actifs pour un jeu en 2.5D et de leur organisation en scène.

Vous pouvez lire la partie 2 de cette série ici.

À propos de l'auteur: Kamil Ziętek est un développeur iOS sur www.allinmobile.co.