This is a read only archive of pad.okfn.org. See the shutdown announcement for details.

igcmg-17sep2014 Indie Games Community Meetup - Wed Sept. 24, 2014

Vorschläge für Talks + Topics unten eintragen ...

Topics : 
Talks / Sessions:

Presentation:
    - Demo of "Bitgem" Game Jam projects (own + other's) (Stefan)
   (Bitte einen Computer mit Unity Web Player organisieren, mein Notebook ist leider zu schwach -_-) 

hello people of austria. may i interest you in a little bit of gamedev spam?
it's a game i'm making, you can check it out! also it is placed in austria: https://www.facebook.com/viktorthegame


Notes from the Session
-----------------------------------------------------------------------------------------------------------------------------------------------------------


1. Talk: 
- Demo of "Bitgem" Game Jam projects (own + other's) (Stefan)
    play.dyadicgames.com/lupus-hunter-dilbert/


2. Talk:   

Steps: 
    (1) Create vector graphic (e.g with adobe illustrator) 
    (2) Effect / With Adobe After Effects 
    (3) a) Create Sprite Sheet with Photoshop (Plugin Sprite Sheet Exporter)
    (4) Create new Unity Project -> Select "2D setup" 
         Sprite Editor -> Grid 
         Create "New Sprite" 
         Create "New Animation" -> Create new Clip -> drag & drop sprites 
         
NY
         
Spritesheets erstellen
Spritesheets sind zeitaufwendiger haben aber einige Vorteile: 
 - In Unity sind sie sehr gut verwendbar und sie geben dem Projekt Struktur (ein Charakter hat ein            Spritesheet oder gar alle Animationen in einem Sheet)
 - Sie brauchen weniger Ressourcen (Webseiten haben weniger http requests, Grafikkarten weniger          Speicher und weniger Zeichenaufrufe)

1) Illustrator
Erstellung der Zeichnung in einem Vector Programm der Wahl (Illustrator, Inkscape).
Die Gründe für eine Vectorzeichnung bei mir sind: 
- leichte nachträgliche Änderungen der Zeichnung durch Pfade 
- Schöne Werkzeuge für Comiczeichnungen (Einstellungen der Kanten etc.) 
- Vektoren haben unendliche Skalierbarkeit (ich weiß oft noch nicht in welcher Größe die Textur         nachher gut aussieht und so kann ich sie nachträglich ändern. Das geht dann auch schon im         Animationsprogramm und ich muss Illustrator nie mehr öffnen. 

2) After Effects
Importieren nach After Effects CS6 (mit CS5 ist dieses Feature noch nicht verfügbar, mit CC hab ich keine Ahnung). 

Einfach das Illustrator File importieren und dann jede Ebene (oder alle zusammen) mit Rechtsklick

"Formen aus Vektorebene erstellen" → Gleiche Pfade.
      Vorher war das sehr umständlich (warum auch immer). Jetzt funktioniert es spitze. 

Skalieren (hier aufpassen dass man in der Ebene die Sonne aktiviert hat. Sonne = für Vektorebene optimieren, sonst skaliert er nur mit Pixeln) und Animieren nach Belieben. (Für die Anzahl an Frames nehme ich immer eine "gerade" Anzahl an Kompositionsbilder [16,32,64] damit sie theoretisch auf eine rechteckige Spritetextur passen. Wenn man mehrere Animationen vorhat ist das aber vermutlich egal wenn etwas Freiraum braucht)

Zum Schluss einfach die Animation als .png Sequenz in einen Ordner rausspielen. 

3) Photoshop
unter "Datei" -> "Skripten" -> "Dateien in Stapel laden" einfach den Ordner mit den Bildern auswählen. (one click) 
Kurz warten. 
Datei speichern. 
Und dann mit dem Plugin "spriteSheetExporter" (ist auch gratis downloadbar) unter "Skripten" -> "Sprite Sheet Exporter" ein fertiges Sprite Sheet rausbekommen.


3.5) Optimierung
Man kann das .png noch weiter optimieren um kb zu sparen und um das .png schneller laden zu lassen. Dafür gibt es Programme, die das .png nur von der Komprimierung optimieren oder größere, die die einzelnen Ebenen auch Zuschneiden und man sich Photoshop spart (z.B Texture Packer).

Das hat auch direkt ein Plugin für Unity, was bei mir aber leider nicht funktioniert hat.

4) Unity

In Unity importieren und als "2D/Sprite" mit Typ "Multiple" auswählen (hier aufpassen dass die Textur die tatsächliche Größe des Spritesheets hat, sonst folgt Qualitätsverlust. Nicht davor zurückscheuen auch 4096 pixel zu verwenden. Für ein 256x256 pixel Bild wären das immerhin 16 Reihen und 16 Spalten also 256 Animationsbilder. Da geht schon einiges rein.).

Textur slicen mit dem Grid/Raster das man ausgewählt hat (z.B 256x256) one-click-slicen. Apply. Auf das Objekt klicken -> Window -> Animation öffnen und die Textur-Teile, die man animiert haben will einfach in das Fenster ziehen. Animationsgeschwindigkeit anpassen. Fertig. Die einzelnen Animationen kann man dann im Animator logisch miteinander verknüpfen. 

Übrigens: Die Grafik muss natürlich nicht den Pixelnormen 128,256,512 etc. folgen. Das war bei mir jetzt zufällig so. Du kannst auch ein 10x34 pixel Bild animieren. Wichtig ist nur dass man so wenig Platz wie möglich am Spritesheet verliert, aber das macht das Plugin eh automatisch. 
3. Talk 

coole Tools: 
    -- Dependency management
    -- Tasks / Buildscript
   -- yeoman.io 
   -- phaser (als js / html5 game framework)


Bitcoin Discussion: 
    - http://murstrom.at/msp013-bitcoin/