Konstruieren einer Kachel aus 4 Teilen - um in einem Wortspiel eine Einheit aus benachbarten Buchstaben zu erstellen

Ich arbeite an einem Scrabble-ähnlichen Wortspiel für Android , bei dem gelbe durchscheinende Buchstabenplättchen auf einem weißen Spielbrett platziert werden:

Bildschirmfoto

Ich möchte keine langweiligen rechteckigen Kacheln verwenden - und gleichzeitig kann ich mein Spiel nicht zu kompliziert machen ... also habe ich mir die folgenden grafischen Assets ausgedacht (mit InkScape erstellt, als Bitmap exportiert und dann in 4 Stücke mit ImageMagick):

Vermögenswerte

Wie Sie oben sehen können, gibt es round.svg und square.svg und ich habe sie in 4 Teile geteilt:

  • round_0.png
  • round_1.png
  • round_2.png

  • round_3.png

  • square_0.png

  • square_1.png
  • square_2.png
  • square_3.png

Und wie Sie im Screenshot der App sehen können, verwende ich diese Teile dann, um die angrenzenden Buchstabenkacheln nahtlos anzuordnen.

Meine Frage ist: Für round.svg (und shadow.svg ) habe ich gerade 2 lineare Farbverläufe an Nordwest- und Südostecken verwendet - und das sieht nicht gut aus.

Hat jemand eine gute Idee für mein Setup, wie ich die round.svg besser gestalten kann ?

Mir ist nicht ganz klar, warum Sie diese in separate Bilder aufteilen.
Weil ich aus den nebeneinander auf dem Spielplan platzierten Buchstabenplättchen eine Einheit (wie heißes Blei) bilden möchte. Wenn Sie sich die beliebte App Words with Friends ansehen , machen sie ähnliches, aber von 9 oder mehr Kachelstücken ...
Oh! Ich verstehe es. Es handelt sich also nicht um Teile einer Kachel, sondern um einzelne Kacheln, die zu einer Gruppe zusammengefasst werden. Das ist etwas kniffliger.
Nun, meine Aussage war keine Antwort, nur eine Warnung, falls Sie es nicht wussten, und ein kleiner Rat, der auf meiner Meinung basiert. Entfernen Sie es, da es unerwünscht ist.

Antworten (2)

Wie baust du die App? Ich bin mit Android nicht so vertraut, aber in iOS würde ich wahrscheinlich in Betracht ziehen, dies mit Phonegap zu erstellen und einfach CSS für alles zu verwenden. Mit CSS brauche ich nur das DIV. Ich kann es dann mit Verlauf, Farbe, abgerundeten Ecken und Schlagschatten stylen. Keine Notwendigkeit, Bilder zu hacken und zu würfeln.

Ich kann mir vorstellen, dass Sie dasselbe mit den UI-Tools innerhalb eines bestimmten Codierungsrahmens tun können, den Sie verwenden.

Fazit: Verwenden Sie keine Bilder, Sie sollten diese im Code rendern können.

AKTUALISIEREN:

OK, ich glaube, ich verstehe, was du jetzt tust.

Das heißt, meine Antwort steht immer noch, ich denke, Sie hätten es letztendlich einfacher, dies in Code vs. Hard Assets zu handhaben.

Das heißt, ich denke, was Sie tun müssen, um den gewünschten 3D-Effekt zu erzielen, ist, keinen Farbverlauf zu verwenden, sondern, wie Takkat betont, ein Highlight entlang der angrenzenden oberen und linken Kante der gruppierten Kacheln und eine Schattenlinie auf dem angrenzender rechter und unterer Rand der gruppierten Kacheln.

Dies bedeutet, dass Sie wahrscheinlich mehr Kacheln benötigen.

Zum Beispiel:

  • square0 = Top Highlight (für Gruppen von mehr als einer Zeile)
  • square1 = linke Hervorhebung (für Gruppen mit mehr als einer Spalte)
  • square2 = unterer Schatten (für Gruppen von mehr als einer Reihe)
  • square3 = rechter Schatten (für Gruppen von mehr als einer Spalte)
  • square4 = oberes Highlight, unterer Schatten (für Gruppen von einer Reihe)
  • square5 = linkes Highlight, rechter Schatten (für Gruppen von einer Spalte)

Selbst nach all dem werden Sie jedoch immer noch Probleme haben, wenn Sie Innenecken haben. Idealerweise hätten Sie dann auch eine Reihe von Quadraten mit nur Ecklichtern und Schatten, um alle Inneneckkombinationen aufzunehmen: oberes linkes Highlight, unterer rechter Schatten, oberer rechter Schatten-zu-Highlight-Übergang, unterer linker Schatten-zu-Highlight Übergang, dann die Kombinationen (oben links und unten rechts, unten links und oben rechts)

An diesem Punkt würde ich sagen, dass die Dinge chaotisch werden, und ich würde eine von zwei Optionen vorschlagen:

  • Sehen Sie, ob Sie dies stattdessen mit Codelogik tun können
  • Überdenken Sie die Ästhetik und entscheiden Sie sich vielleicht für ein flaches Design anstelle von 3-D, um Ihnen die Kopfschmerzen all dieser separaten Grafiken zu ersparen.
Ich verstehe, was Sie vorschlagen (Schatten und Effekte im Code ausführen), möchte aber den umgekehrten Weg gehen (jedes Asset so weit wie möglich vorgerendert).
@AlexanderFarber FYI, ich habe meine Antwort mit weiteren Informationen aktualisiert.

Um einer flachen Form einen einfachen Abschrägungseffekt hinzuzufügen, können wir helle und dunkle Reflexionen am (abgerundeten Rand) hinzufügen, indem wir eine weiße und eine schwarze transparente Linie zeichnen:

Geben Sie hier die Bildbeschreibung ein

Dann wenden wir einen Unschärfeeffekt auf diese Linie an, um sie glatter zu machen, um das folgende Symbol zu erhalten (kann in die gewünschten Teile geschnitten werden):

Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass wir dann keinen Farbverlauf auf die Objektfüllung angewendet haben.

Hast du das in InkScape gemacht? Schneiden Sie innen ein Rechteck aus - und verschieben Sie es dann nach unten und nach rechts?
Ja, es ist Inkscape. Ich habe gerade das Zeichenwerkzeug für gerade Linien für die weiße Linie über Ihrem Beispiel verwendet. Dann habe ich die weiße Linie kopiert und eingefügt, um sie horizontal und vertikal für die schwarze Linie zu spiegeln.
Diese vorgeschlagene Abschrägung ist ein großartiger visueller Effekt, aber ich werde ihn wahrscheinlich nicht mit square.png verwenden können - wenn Sie sich zum Beispiel die Ecke ansehen, die aus den Buchstaben P, I, T im App-Screenshot besteht ...
Mit 4 Objekten könnten Sie die einzelne Kachel 'T' sowieso nicht formen.
Bei 4 Stück halte ich das noch für möglich: wenn man sich alle nebeneinanderliegenden Buchstaben wie auf gelbes Papier gezeichnet vorstellt, mit hochgebogenen Ecken (mit kleinen Eckschatten).
Ich werde versuchen, Ihren Abschrägungseffekt anzupassen (brauche jedoch mehr Teile) ... danke
Konstruieren einer Kachel aus 4 Teilen - um in einem Wortspiel eine Einheit aus benachbarten Buchstaben zu erstellen
AntwortenHierDatenschutz-Bestimmungen1y, 0v