Monat: Mai 2017

Final Ball World Spielvorstellung – ein neuer Versuch

Final Ball World Spielvorstellung – ein neuer Versuch

Final Ball World

Final Ball World im Apple Appstore
Final Ball World im Google Playstore

Auf ein neues

Da mein erster Versuch ein Appstore reifes Spiel zu erstellen gescheitert war, plante ich nun ein wesentlich einfacheres Spiel. Inspirieren ließ ich mich von Mercury, ein Spiel aus meiner frühen Jugendzeit. Es geht darum Quecksilber durch das Kippen eines Spielbrettes möglichst ohne Verlust zu einem bestimmten Ziel zu bringen. Die Idee mit dem Kippen des Spielbrettes fand ich ziemlich innovativ und wollte genau das auch umsetzen. Bei mir sollte es jedoch kein Quecksilber sein, sondern eine Kugel die man zu einem bestimmten Ziel transportieren muss. Auf dem Weg dorthin muss man kleine Rätsel lösen und sein Geschick unter Beweis stellen.

Enviroment / Umgebung

Erstmal stöberte ich im Asset Store und sucht nach passenden Assets für das Spiel. Schnell stand für mich fest, das es ein Spiel im All werden sollte. Im All kann es eigentlich jede Art von Außergewöhnlichkeit geben, ohne das jemanden etwas daran stört (Beamen, Zeitreisen, seltsam aussehende Objekte ;)).

Los gehts!

Ich suchte mir also ein paar Materialien zusammen und fing an das grundlegende Spielprinzip auf die Beine zu stellen – aus das Kippen des Brettes. Dies erwies sich am Anfang als garnicht so einfach, denn bei jeder Rotation des Brettes flog der Ball einfach durch das Brett hindurch. Hier musste ich ein bisschen tricksen und die Position des Balles bei jeder Rotation des Brettes ein wenig nach oben verschieben. Nach einigem herum probieren klappte es dann aber! Grob gesagt war es das auch erstmal mit dem grundlegendem Spielprinzip. Ein Brett das sich bewegen kann und ein Ball der darauf herum rollt.

Level design / Kreativ sein!

Jetzt mussten natürlich jede Menge Level und Elemente her. Da war Kreativität angesagt. Ein paar Elemente stelle ich hier kurz vor.

Der Teleporter

Ein Teleporter durfte natürlich nicht fehlen. Man rollt auf die eine Seite der Platform und kommt auf der anderen Seite wieder heraus.

4 Teleporters
Lets beam you away!

Speed Up

Es sollte ja auch ein bisschen „Action“ mit ins Spiel kommen, genau dafür sind die Beschleuniger da. Berührt man dieses Element wird man im Pfeilrichtung beschleunigt.

Beschleuniger
Beschleuniger

Farbwechsler

Auch die Farbe des Balles sollte man ändern können. Die Runde Platte ist zum Einfärben des Balles gedacht. Berührt man Sie, wird der Ball in diesem Beispiel rot. Das Tor dahinter kann dementsprechend nur passiert werden, wenn der Ball eine rote Färbung angenommen hat.

Farbe wechsele dich!
Farbe wechsele dich!

Soweit so gut! Im zweiten Teil dieses Eintrages werde ich ein paar Levels vorstellen und ein bisschen auf die Herausforderungen bei der mobilen Entwicklung eingehen!

Unity Hero Spielvorstellung – Wie geht es weiter?

Unity Hero Spielvorstellung – Wie geht es weiter?

Unity Hero

Artwork 1
Artwork 1

Na, kennt ihr schon den ersten Teil von der Projektvorstellung? Ansonsten einfach hier klicken: Unity Hero Teil 1

Magische Fähigkeiten und Zaubertränke

Dem Spiel fehlte es irgendwie noch an Pep. Ich entschied mich schließlich dazu verschiedene magische Fähigkeiten einzubauen. Ein Energieball sollte den Monstern einen besonders hohen Schaden zufügen. Eine weitere Idee war eine Art schwarzes Loch, das alle Monster anzieht, so das man selbst nicht angegriffen wird. Ein weiterer Klassiker ist die Selbstheilung. Die Fähigkeiten setzte ich grafisch mit verschiedenen Partikelsystemen um. Der Energieball wird zum Beispiel direkt beim Spieler erzeugt und wandert dann in eine Richtung weiter, bis er auf Monster trifft oder nach einer gewissen Zeit erlischt (Ähnliches Konzept wie bei den Pistolenschüssen). Auch dazu brauchte ich natürlich einen Skript der beschreibt welche Fähigkeiten es gibt, wie diese sich verhalten und welche konkrete Fähigkeit der Held gerade hat. Eine Fähigkeit sollte man im Laufe des Spieles in Form eines Items einsammeln können. Auch plante ich, in einem Itemshop die Fähigkeiten durch eine In Game Währung (Münzen) verbessern zu können. Natürlich sollten auch Zaubertränke nicht fehlen. Um eine Fähigkeit zu benutzen braucht man Mana und ein gewisses Maß an Lebensenergie braucht der Spieler natürlich auch. Um diese Werte zu erhöhen gibt es einen blauen und eine roten Zaubertrank.

Fähigkeitsitems und roter Zaubertrank im Hintergrund
Fähigkeitsitems und roter Zaubertrank im Hintergrund
Energieball in Action
Energieball in Action

Münzen / Diamanten

Eine weitere Idee war das integrieren von Münzen und Diamanten als Spielwährung für den Itemshop. Münzen als auch Diamanten bekommt man, wenn man Monster töten und es werden zufällig welche gespawnt wenn man einen neuen Dungeon betritt. Diamanten sollte es deutlich seltener geben als Diamanten und diese sollte einen höheren Wert haben als die Münzen. Hier könnte man zum Beispiel im Verlauf der weiteren Entwicklung über In-App-Käufe von Diamanten nachdenken.

User Interface

Die Gestaltung eines passenden User Interfaces bereitete mir sowohl Freude als auch Kopfschmerzen. Da mir die meisten kostenlosen User-Interfaces im Asset-Store von Unity nicht gefielen und die Auswahl dort relativ bescheiden ist, entschied ich mich für ein kostenloses aus dem Netz. Fantasy UI Elements
Im Spiel schaut das ganze dann so aus:

Unity Hero mit UI
Unity Hero mit UI
1. Entwurf Item Shop
1. Entwurf Item Shop

Viele weitere unfertige Features

Der Spielentwurf hatte zu diesem Zeitpunkt schon ein relativ großes Maß an Komplexität für mich als Anfänger angenommen. Ich war total begeistert von den Fortschritten der Entwicklung und wollte immer mehr Features einbauen, die aber meist nie richtig fertig wurden. Den Itemshop habe ich angefangen zu designen, es gab aber noch keine Funktionalität. Die Fähigkeiten waren implementiert, aber es gab noch keine Verbesserungsmöglichkeiten. Ich hatte angefangen ein Levelsystem einzubauen, es gab aber noch keine Belohnungen / Vorteile für ein bestimmtes erreichtes Level. Es gab Monster, aber die Vielfalt fehlte. Auch war das Spawn-Konzept nicht ausreichend durchdacht und das Spiel wurde schnell zu schwer (immer mehr Monster).

Abbruch des Projektes

Die vielen unfertigen und halb funktionierenden Features trugen dazu bei, das ich immer weniger Lust auf das Projekt bekam. Es war kein wirkliches Ende in Sicht, da meiner Meinung nach noch enorm viel fehlte. Ich verlor aber nach einiger Zeit auch den Überblick über das, was ich noch implementieren wollte.
Alles in allem kann ich sagen, das ich sehr unstrukturiert an dieses Projekt herangegangen bin und viel zu schnell ein viel zu aufwendiges Spiel bauen wollte. Für mich war das auf jeden Fall eine wichtige Erfahrung, zu sehen das das alles so nicht funktioniert.
Ich entschied mich vorerst das Projekt beiseite zu legen und mich einem weniger aufwendigem Spiel zu widmen.

Goodbye Unity Hero – but perhaps I’ll see you again? 🙂

Icon gestalten mit PS – DIY App Grafik

Icon gestalten mit PS – DIY App Grafik

Icon designen für den Appstore – erstelle dein eigenes Icon

Einleitung – Um was geht es hier eigentlich?

In diesem Beitrag möchte ich euch meinen Workflow beim Designen dieses Icons zeigen.

Icon Speed Up 3D
App Icon für Speed Up 3D

Voraussetzungen

Ich arbeite grundsätzlich mit Photoshop (meine Version ist CC14, viele andere Versionen reichen aber auch aus). Zusätzlich benutze ich für den Mal-Effekt Topaz Impression. Beides ist kostenpflichtig. Alternativ zum Topaz Impression könnt ihr auch die in Photoshop enthalte Öl-Gemälde-Funktion nutzen. Ein Tutorial ist hier verlinkt: Tutorial PS Öl-Gemälde-Filter

Das App-Icon Template

Alles braucht man bei so einem App-Icon nicht selbst machen. Es gibt gute Vorlagen die man kostenlos als Grundgerüst verwenden kann. Ich nutzte das folgende Icon-Set http://Download via File-Upload.net.

Weiter gehts mit PS – Icon design leicht gemacht

Unnötige Ebenen deaktivieren

Ihr öffnet erstmal die PS-Datei. Danach deaktiviert ihr Text- und Backgroundebene mit einem Klick auf das kleine Auge im Ebenenfenster rechts unten.

App-Icon in PS
App Icon Template in PS

Nun öffnet ihr den Ordner 512×512. Ihr deaktiviert die Ebene Metal 1 und aktiviert die Gruppen „Simple metalic – Changable color“ und „Simple Plastic – Changable color“.

icon Rahmen
Icon mit passendem Rahmen

Um die Farbe des Rahmens zu öffnen geht ihr nun auf den „Simple metalic – Changable color“ Ordner und klickt auf die Ebene „Change Color“. Als Farbton hab ich -13 gewählt, als Sättigung +100.

Der Hintergrund

Ich habe einen Screenshot von Speed-Up 3D als Hintergrund für mein Icon gewählt. Das Bild habe ich einfach aus dem Screenshot kopiert und als Ebene unter den Rahmen und der Border-Ebene platziert.

App-Icon mit Hintergrund
Das Speed Up App Icon mit Background

Das S – Handarbeit

Beim Buchstaben könnt ihr euren Gestaltungskünsten freien Lauf lassen. Ich habe das Rechteck-Werkzeug gewählt und rechteckige Balken in Form eines S nachgebaut. Um die richtige Farbe kümmern wir uns nachher.

Rechteck-Werkzeug
Rechteck Werkzeug in Photoshop

Für den Pfeil oben benutzte ich das Eigene-Form Werkzeug und den Pfeil 6.

Eigene-Form-Werkzeug
Eigene Form Werkzeug Photoshop
Resultat
S mit PS

Danach habe ich alle Ebenen markiert und mit CMD-G zu einer Gruppe zusammengeführt. Die Gruppe kann man dann mit CMD-E zu einer neuen Ebene zusammenführen. Abschließend habe ich die unteren Ecken mit dem Radiergummi angespitzt und die anderen Ecken abgerundet.

S mit abgerundeten Kanten
S mit runden Kanten und Spitze

S Fülloptionen

Die Fülloptionen bestimmen unter anderem das Aussehen der Ebene. Diese erreicht ihr, wenn ihr einen Rechtsklick auf die Ebene macht unter dem Menüpunkt Fülloptionen. Ich habe für das S die folgenden Einstellungen gewählt.

"<yoastmark

"<yoastmark

"<yoastmark

"<yoastmark

Das Ergebnis
Das Ergebnis

Der Öl-Gemälde Filter – Dem Icon einen malerischen Look verleihen

Wir klonen die komplette Gruppe 512x512x mit CMD+J und fügen mit CMD+E alles zu einer Ebene zusammen. Mit Topaz Impression habe ich mir nun einen passenden Effekt herausgesucht. Der Effekt heißt Liquid Lines 1. Danach schaut das ganze dann so aus:

Liquid Lines 1
Filter in Topaz Impression

Jetzt wird einfach die Deckkraft der Ebene auf 50% reduziert und das ist das Ergebnis!

Deckkraft 50%
Deckkraft der Ebene muss auf 50% reduziert werden
TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste