Add a new underwater theme

This commit is contained in:
Lonami Exo 2017-05-07 18:29:31 +02:00
parent d34a566af3
commit 4e5c4fd453
9 changed files with 115 additions and 149 deletions

View file

@ -1,3 +1,4 @@
default default
dark dark
bandw bandw
underwater

View file

@ -0,0 +1,26 @@
{
"name": "Underwater",
"price": 50,
"colors": {
"background": "0044aaff",
"foreground": "d7f4e3ff",
"buttons": [
"37c871ff",
"2a7fffff",
"00ccffff",
"5f5fd3ff"
],
"empty_cell": "0066ffff",
"cells": [
"37c871ff", "2ad4ffff", "0000d4ff",
"00ffccff", "5599ffff", "87cddeff", "80b3ffff",
"00ff66ff", "00d4aaff"
],
"current_score": "aaccffff",
"high_score": "2aff80ff",
"bonus": "aaeeffff",
"band": "3771c8ff",
"text": "002255ff"
},
"cell_texture": "bubble.png"
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 B

After

Width:  |  Height:  |  Size: 337 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 823 B

View file

@ -38,7 +38,7 @@ public class Theme {
public static Skin skin; public static Skin skin;
public NinePatch cellPatch; public Texture cellTexture;
// Save the button styles so the changes here get reflected // Save the button styles so the changes here get reflected
private ImageButton.ImageButtonStyle[] buttonStyles; private ImageButton.ImageButtonStyle[] buttonStyles;
@ -153,8 +153,7 @@ public class Theme {
} }
String cellTextureFile = json.getString("cell_texture"); String cellTextureFile = json.getString("cell_texture");
cellPatch = new NinePatch(new Texture( cellTexture = new Texture(Gdx.files.internal("ui/cells/"+cellTextureFile));
Gdx.files.internal("ui/cells/"+cellTextureFile)), 4, 4, 4, 4);
return this; return this;
} }

View file

@ -29,6 +29,12 @@ public class ThemeCard extends Actor {
public float cellSize; public float cellSize;
private final static int colorsUsed[][] = {
{0, 7, 7},
{8, 7, 3},
{8, 8, 3}
};
//endregion //endregion
//region Constructor //region Constructor
@ -64,21 +70,14 @@ public class ThemeCard extends Actor {
batch.setColor(theme.background); batch.setColor(theme.background);
batch.draw(background, x, y, getWidth(), getHeight()); batch.draw(background, x, y, getWidth(), getHeight());
// Do not draw on the borders (0,0 offset to add some padding), colors used:
// 0 7 7
// 8 7 3
// 8 8 3
Cell.draw(theme.getCellColor(0), batch, x + cellSize, y + cellSize, cellSize);
Cell.draw(theme.getCellColor(7), batch, x + cellSize * 2, y + cellSize, cellSize);
Cell.draw(theme.getCellColor(7), batch, x + cellSize * 3, y + cellSize, cellSize);
Cell.draw(theme.getCellColor(8), batch, x + cellSize, y + cellSize * 2, cellSize); // Avoid drawing on the borders by adding +1 cell padding
Cell.draw(theme.getCellColor(7), batch, x + cellSize * 2, y + cellSize * 2, cellSize); for (int i = 0; i < colorsUsed.length; ++i) {
Cell.draw(theme.getCellColor(8), batch, x + cellSize * 3, y + cellSize * 2, cellSize); for (int j = 0; j < colorsUsed[i].length; ++j) {
Cell.draw(theme.cellTexture, theme.getCellColor(colorsUsed[i][j]), batch,
Cell.draw(theme.getCellColor(8), batch, x + cellSize, y + cellSize * 3, cellSize); x + cellSize * (j + 1), y + cellSize * (i + 1), cellSize);
Cell.draw(theme.getCellColor(8), batch, x + cellSize * 2, y + cellSize * 3, cellSize); }
Cell.draw(theme.getCellColor(3), batch, x + cellSize * 3, y + cellSize * 3, cellSize); }
nameLabel.setBounds(x + nameBounds.x, y + nameBounds.y, nameBounds.width, nameBounds.height); nameLabel.setBounds(x + nameBounds.x, y + nameBounds.y, nameBounds.width, nameBounds.height);
nameLabel.draw(batch, parentAlpha); nameLabel.draw(batch, parentAlpha);

View file

@ -2,6 +2,7 @@ package io.github.lonamiwebs.klooni.game;
import com.badlogic.gdx.Gdx; import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color; import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Batch; import com.badlogic.gdx.graphics.g2d.Batch;
import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Interpolation; import com.badlogic.gdx.math.Interpolation;
@ -105,11 +106,18 @@ public class Cell implements BinSerializable {
//region Static methods //region Static methods
// TODO Use skin atlas // Default texture (don't call overloaded version to avoid overhead)
public static void draw(Color color, Batch batch, public static void draw(final Color color, final Batch batch,
float x, float y, float size) { final float x, final float y, final float size) {
batch.setColor(color); batch.setColor(color);
Klooni.theme.cellPatch.draw(batch, x, y, size, size); batch.draw(Klooni.theme.cellTexture, x, y, size, size);
}
// Custom texture
public static void draw(final Texture texture, final Color color, final Batch batch,
final float x, final float y, final float size) {
batch.setColor(color);
batch.draw(texture, x, y, size, size);
} }
//endregion //endregion

View file

@ -19,6 +19,18 @@
sodipodi:docname="buttons.svg"> sodipodi:docname="buttons.svg">
<defs <defs
id="defs4"> id="defs4">
<linearGradient
inkscape:collect="always"
id="linearGradient4659">
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="0"
id="stop4655" />
<stop
style="stop-color:#ffffff;stop-opacity:0.60679615"
offset="1"
id="stop4657" />
</linearGradient>
<linearGradient <linearGradient
inkscape:collect="always" inkscape:collect="always"
id="linearGradient4313"> id="linearGradient4313">
@ -94,6 +106,17 @@
y1="1012.8427" y1="1012.8427"
x2="-441.97687" x2="-441.97687"
y2="1072.3632" /> y2="1072.3632" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient4659"
id="radialGradient4661"
cx="59.769882"
cy="811.46765"
fx="59.769882"
fy="811.46765"
r="6.9998441"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.43721182,3.7482347e-7,-3.6476786e-7,0.42548248,33.63808,466.20236)" />
</defs> </defs>
<sodipodi:namedview <sodipodi:namedview
id="base" id="base"
@ -102,9 +125,9 @@
borderopacity="1" borderopacity="1"
inkscape:pageopacity="0" inkscape:pageopacity="0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:zoom="1.1041667" inkscape:zoom="4.2042016"
inkscape:cx="228.62228" inkscape:cx="84.591887"
inkscape:cy="19.981203" inkscape:cy="259.00893"
inkscape:document-units="px" inkscape:document-units="px"
inkscape:current-layer="layer1" inkscape:current-layer="layer1"
showgrid="false" showgrid="false"
@ -286,7 +309,7 @@
id="basic" id="basic"
inkscape:export-xdpi="90" inkscape:export-xdpi="90"
inkscape:export-ydpi="90" inkscape:export-ydpi="90"
transform="translate(0,-159.117)"> transform="matrix(3.0000588,0,0,3.0000588,0,-2123.8991)">
<rect <rect
ry="0" ry="0"
y="966.36218" y="966.36218"
@ -318,51 +341,14 @@
<text <text
xml:space="preserve" xml:space="preserve"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#80ffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#80ffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="5.5775623" x="7.3185968"
y="799.33905" y="769.04504"
id="text4190"><tspan id="text4190"><tspan
sodipodi:role="line" sodipodi:role="line"
id="tspan4192" id="tspan4192"
x="5.5775623" x="7.3185968"
y="799.33905" y="769.04504"
style="font-size:15.69341087px;line-height:1.25">cells</tspan></text> style="font-size:15.69341087px;line-height:1.25">cells</tspan></text>
<g
id="g4224"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
transform="translate(0,-159.117)">
<rect
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4199"
width="16"
height="16"
x="22.362251"
y="966.36218"
ry="0" />
<rect
ry="2"
y="967.36224"
x="23.362251"
height="14"
width="14"
id="rect4201"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
style="opacity:1;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 23.361328,978.60352 v 0.75781 c 0,1.108 0.892,2 2,2 h 1.876953 l -0.589843,-2.40625 -1.457032,0.57422 z"
id="rect4210"
inkscape:connector-curvature="0" />
<path
style="opacity:1;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 37.361328,972.64648 -1.519531,1.49219 -0.441406,3.62305 1.960937,1.34961 z"
id="rect4212"
inkscape:connector-curvature="0" />
<path
style="opacity:1;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 27.566406,967.36133 1.027344,2.49023 -0.574219,3.75586 1.679688,1.41406 -0.619141,-1.81054 1.414063,-3.4043 1.521484,-2.44531 z"
id="rect4214"
inkscape:connector-curvature="0" />
</g>
<g <g
id="g4261" id="g4261"
transform="translate(167.59797,-248.90157)"> transform="translate(167.59797,-248.90157)">
@ -847,88 +833,6 @@
x="13.435027" x="13.435027"
y="587.79303" y="587.79303"
style="font-size:40px;line-height:1.25">measures</tspan></text> style="font-size:40px;line-height:1.25">measures</tspan></text>
<text
id="text4189"
y="649.68481"
x="48.548107"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="649.68481"
x="48.548107"
id="tspan4191"
sodipodi:role="line"
style="font-size:10.25197601px;line-height:1.25">2px radius</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="48.548107"
y="668.15973"
id="text4199"><tspan
sodipodi:role="line"
id="tspan4201"
x="48.548107"
y="668.15973"
style="font-size:10.25197601px;line-height:1.25">4px patch</tspan></text>
<g
inkscape:export-ydpi="90"
inkscape:export-xdpi="90"
id="g4221"
transform="translate(12.425615,-298.76521)">
<rect
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4223"
width="16"
height="16"
x="0"
y="966.36218"
ry="0" />
<rect
ry="2"
y="967.36224"
x="1"
height="14"
width="14"
id="rect4225"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<rect
style="opacity:1;fill:#0000ff;fill-opacity:0.5;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4205"
width="4"
height="4"
x="12.425602"
y="667.59698"
rx="0"
ry="0" />
<rect
ry="0"
rx="0"
y="679.59698"
x="24.42561"
height="4"
width="4"
id="rect4227"
style="opacity:1;fill:#0000ff;fill-opacity:0.5;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
ry="0"
rx="0"
y="-28.42561"
x="667.59698"
height="4"
width="4"
id="rect4229"
style="opacity:1;fill:#0000ff;fill-opacity:0.5;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
transform="rotate(90)" />
<rect
style="opacity:1;fill:#0000ff;fill-opacity:0.5;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4231"
width="4"
height="4"
x="679.59698"
y="-16.425602"
rx="0"
ry="0"
transform="rotate(90)" />
<rect <rect
rx="24" rx="24"
y="623.88177" y="623.88177"
@ -1193,5 +1097,23 @@
d="m 320.52609,778.38092 c -0.57668,0.0508 -1.14636,0.20524 -1.67578,0.47266 l -1.69336,0.85547 c -2.11769,1.06969 -2.76965,3.52564 -1.46289,5.50586 l 5.56836,8.43945 -7.875,6.89063 c -1.84803,1.61683 -1.84803,4.21909 0,5.83593 l 0.95312,0.83399 c 1.84803,1.61684 4.82189,1.61684 6.66992,0 l 5.83399,-5.10352 4.125,6.25196 c 1.30675,1.98021 4.06395,2.71227 6.18164,1.64257 l 1.69336,-0.85547 c 2.11769,-1.06969 2.76965,-3.52564 1.46289,-5.50586 l -5.56836,-8.43945 7.875,-6.89062 c 1.84803,-1.61684 1.84803,-4.2191 0,-5.83594 l -0.95312,-0.83399 c -1.84804,-1.61683 -4.82385,-1.61683 -6.67188,0 l -5.83203,5.10352 -4.125,-6.25195 c -0.98007,-1.48516 -2.77584,-2.26753 -4.50586,-2.11524 z" d="m 320.52609,778.38092 c -0.57668,0.0508 -1.14636,0.20524 -1.67578,0.47266 l -1.69336,0.85547 c -2.11769,1.06969 -2.76965,3.52564 -1.46289,5.50586 l 5.56836,8.43945 -7.875,6.89063 c -1.84803,1.61683 -1.84803,4.21909 0,5.83593 l 0.95312,0.83399 c 1.84803,1.61684 4.82189,1.61684 6.66992,0 l 5.83399,-5.10352 4.125,6.25196 c 1.30675,1.98021 4.06395,2.71227 6.18164,1.64257 l 1.69336,-0.85547 c 2.11769,-1.06969 2.76965,-3.52564 1.46289,-5.50586 l -5.56836,-8.43945 7.875,-6.89062 c 1.84803,-1.61684 1.84803,-4.2191 0,-5.83594 l -0.95312,-0.83399 c -1.84804,-1.61683 -4.82385,-1.61683 -6.67188,0 l -5.83203,5.10352 -4.125,-6.25195 c -0.98007,-1.48516 -2.77584,-2.26753 -4.50586,-2.11524 z"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g> </g>
<g
id="bubble"
transform="matrix(3.0000588,0,0,3.0000588,-107.02664,-1645.0542)">
<rect
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4652"
width="16"
height="16"
x="53.985813"
y="806.75049"
ry="0" />
<circle
r="6.9998441"
cy="814.75049"
cx="61.985813"
id="path4660"
style="opacity:1;fill:url(#radialGradient4661);fill-opacity:1;stroke:none;stroke-width:0.99538457;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View file

@ -36,6 +36,11 @@ ids = [
'web' 'web'
] ]
cells = [
'basic',
'bubble'
]
inkscape_default_dpi = 90 inkscape_default_dpi = 90
svg = 'buttons.svg' svg = 'buttons.svg'
root = '../android/assets/ui' root = '../android/assets/ui'
@ -55,4 +60,10 @@ for multiplier in multipliers:
# -d to specify the DPI # -d to specify the DPI
run(f'inkscape -z -i{objectid} -j -e{filename} -d{dpi} {svg}', run(f'inkscape -z -i{objectid} -j -e{filename} -d{dpi} {svg}',
shell=True, stdout=DEVNULL) shell=True, stdout=DEVNULL)
folder = os.path.join(folder, 'cells')
os.makedirs(folder, exist_ok=True)
for cellid in cells:
filename = os.path.join(folder, cellid + '.png')
run(f'inkscape -z -i{cellid} -j -e{filename} -d{dpi} {svg}',
shell=True, stdout=DEVNULL)