des ordinateurs

Animation Photoshop pour Sprite Sheet

Mai 2020

Animation Photoshop pour Sprite Sheet


Lorsque vous travaillez avec des feuilles de sprites, votre première étape consiste à créer l'animation qui contiendra les sprites de notre feuille de sprites. Il existe différents programmes d'animation tels que FlashR et PhotoshopR. Dans ce didacticiel, nous allons créer une animation simple dans Photoshop et l'exporter en tant que séquence PNG pour l'importer dans TexturePacker.

Commencez une nouvelle image à 256 largeur x 256 hauteur x 72 res. Pourquoi utilisons-nous 256? Dans la plupart des applications mobiles, une taille de canevas d'une puissance de deux est recommandée. C'est donc une bonne pratique de rester dans cette plage si possible. Nous aurons dix images pour notre animation d'une balle rebondissante.

  1. Sur la première couche, dessinez une petite boule rouge au centre du bord inférieur.

  2. Ouvrez le panneau Animation. Nous utiliserons le mode Frame. Notre premier cadre est déjà là.

  3. Cliquez sur le petit triangle à côté de 0 sec et réglez les fps sur 0,2.

  4. En bas du panneau, cliquez sur l'icône Dupliquer les images sélectionnées pour ajouter une autre image au panneau d'animation.

    Il existe plusieurs façons d'utiliser le panneau Calques pour créer l'animation. Je trouve plus facile de créer un nouveau calque dans le panneau Calques pour chaque image du panneau Animations.

  5. Maintenant que nous avons deux images dans le panneau Animation, nous avons besoin d'une deuxième image dans le panneau Calques. Cliquez avec le bouton droit sur le calque 1 et sélectionnez Dupliquer le calque dans le menu. Renommez ce deuxième calque en "Calque 2".

    Nous avons maintenant deux images dans le panneau Animation et deux couches dans le panneau Calques. Mais nous devons les coordonner ensemble.

  6. Sélectionnez la première image dans le panneau Animations. Dans le panneau Calques, désactivez la visibilité du calque 2 afin que le calque 1 soit le seul calque visible.

  7. Sélectionnez la deuxième image du panneau Animations. Dans le panneau Calques, désactivez la visibilité du calque 1 et activez la visibilité du calque 2.

    Non, lorsque vous cliquez sur le bouton Lecture dans le panneau d'animation, vous verrez que la balle se déplace de haut en bas dans la fenêtre d'image.

  8. Sélectionnez la deuxième image dans le panneau d'animation et ajoutez une nouvelle image.

  9. Dans le panneau Calques, dupliquez le calque 2 et renommez-le "calque 3".

  10. L'image 3 étant toujours sélectionnée dans le panneau d'animation, désactivez la visibilité du calque 2. Déplacez légèrement la boule rouge vers le haut sur le calque 3.

  11. Pour les images 1 et 2 du panneau d'animation, désactivez la visibilité du calque 3.

    Répétez ces étapes pour trois autres images. Ensuite, vous devriez avoir 6 cadres avec un seul calque visible dans chacun.

    Image 1 - Couche 1 visible
    Image 2 - Couche 2 visible
    Image 3 - Couche 3 visible
    Cadre 4 - Couche 4 visible
    Image 5 - Couche 5 visible
    Cadre 6 - Couche 6 visible

Suivant →

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une marque [s] d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

HOW TO MAKE SPRITE SHEETS FOR YOUR UNITY GAME - TUTORIAL (Mai 2020)



Tags Article: Animation Photoshop pour Sprite Sheet, Digital Art and Design, comment créer les sprites pour une feuille de sprite

Messages De Beauté Populaires

Lauren Koslow
TV et Films

Lauren Koslow

Boy Proof par Cecil Castellucci

Mariage - Symboles de rêve

Mariage - Symboles de rêve

religion et spiritualité