New preload screen
This commit is contained in:
parent
ca358d41f6
commit
ca88cfe32b
261
graphics/ui/preload.svg
Normal file
261
graphics/ui/preload.svg
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="1920"
|
||||
height="1080"
|
||||
viewBox="0 0 507.99999 285.75001"
|
||||
version="1.1"
|
||||
id="svg4677"
|
||||
inkscape:version="0.92.0 unknown"
|
||||
sodipodi:docname="preload.svg"
|
||||
inkscape:export-filename="/home/michael/workspace/spacetac/out/assets/images/preload/bar-content.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96">
|
||||
<defs
|
||||
id="defs4671">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient4739">
|
||||
<stop
|
||||
style="stop-color:#3066a9;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop4735" />
|
||||
<stop
|
||||
style="stop-color:#1971d3;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop4737" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient4739"
|
||||
id="linearGradient4741"
|
||||
x1="685.39648"
|
||||
y1="614.91211"
|
||||
x2="1234.6035"
|
||||
y2="614.91211"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<filter
|
||||
style="color-interpolation-filters:sRGB;"
|
||||
inkscape:label="Drop Shadow"
|
||||
id="filter4935">
|
||||
<feFlood
|
||||
flood-opacity="0.498039"
|
||||
flood-color="rgb(0,0,0)"
|
||||
result="flood"
|
||||
id="feFlood4925" />
|
||||
<feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="out"
|
||||
result="composite1"
|
||||
id="feComposite4927" />
|
||||
<feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="3"
|
||||
result="blur"
|
||||
id="feGaussianBlur4929" />
|
||||
<feOffset
|
||||
dx="6"
|
||||
dy="6"
|
||||
result="offset"
|
||||
id="feOffset4931" />
|
||||
<feComposite
|
||||
in="offset"
|
||||
in2="SourceGraphic"
|
||||
operator="atop"
|
||||
result="composite2"
|
||||
id="feComposite4933" />
|
||||
</filter>
|
||||
<filter
|
||||
inkscape:label="Refractive Gel B"
|
||||
inkscape:menu="Ridges"
|
||||
inkscape:menu-tooltip="Gel effect with strong refraction"
|
||||
height="1.4"
|
||||
width="1.4"
|
||||
y="-0.2"
|
||||
x="-0.2"
|
||||
style="color-interpolation-filters:sRGB;"
|
||||
id="filter5229">
|
||||
<feOffset
|
||||
dx="3"
|
||||
dy="3"
|
||||
in="SourceAlpha"
|
||||
result="result3"
|
||||
id="feOffset5205" />
|
||||
<feGaussianBlur
|
||||
stdDeviation="8"
|
||||
in="result3"
|
||||
result="result1"
|
||||
id="feGaussianBlur5207" />
|
||||
<feComposite
|
||||
operator="in"
|
||||
in2="result1"
|
||||
in="SourceGraphic"
|
||||
result="result2"
|
||||
id="feComposite5209" />
|
||||
<feComposite
|
||||
operator="out"
|
||||
result="fbSourceGraphic"
|
||||
in="result2"
|
||||
in2="result2"
|
||||
id="feComposite5211" />
|
||||
<feColorMatrix
|
||||
result="fbSourceGraphicAlpha"
|
||||
in="fbSourceGraphic"
|
||||
values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0 0 0 0 6 0 "
|
||||
id="feColorMatrix5213" />
|
||||
<feGaussianBlur
|
||||
result="result0"
|
||||
in="fbSourceGraphicAlpha"
|
||||
stdDeviation="3"
|
||||
id="feGaussianBlur5215" />
|
||||
<feSpecularLighting
|
||||
specularExponent="20"
|
||||
specularConstant="2"
|
||||
surfaceScale="5"
|
||||
lighting-color="rgb(255,255,255)"
|
||||
result="result1"
|
||||
in="result0"
|
||||
id="feSpecularLighting5219">
|
||||
<feDistantLight
|
||||
azimuth="235"
|
||||
elevation="35"
|
||||
id="feDistantLight5217" />
|
||||
</feSpecularLighting>
|
||||
<feComposite
|
||||
operator="in"
|
||||
result="result2"
|
||||
in="result1"
|
||||
in2="fbSourceGraphicAlpha"
|
||||
id="feComposite5221" />
|
||||
<feComposite
|
||||
in="fbSourceGraphic"
|
||||
operator="arithmetic"
|
||||
k2="1.5"
|
||||
k3="3"
|
||||
in2="result2"
|
||||
result="result91"
|
||||
id="feComposite5223" />
|
||||
<feBlend
|
||||
mode="screen"
|
||||
in2="result91"
|
||||
id="feBlend5225" />
|
||||
<feConvolveMatrix
|
||||
order="3 3"
|
||||
kernelMatrix="2 0 1 0 1 0 0 0 0 "
|
||||
targetX="1"
|
||||
targetY="1"
|
||||
divisor="3"
|
||||
id="feConvolveMatrix5227" />
|
||||
</filter>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#000000"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.98994949"
|
||||
inkscape:cx="939.05184"
|
||||
inkscape:cy="522.37732"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1037"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="20"
|
||||
inkscape:window-maximized="0"
|
||||
units="px"
|
||||
inkscape:snap-bbox="false"
|
||||
inkscape:snap-bbox-edge-midpoints="true">
|
||||
<sodipodi:guide
|
||||
position="187.04898,130.36265"
|
||||
orientation="55.241507,0"
|
||||
id="guide4710"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="187.04898,115.74667"
|
||||
orientation="0,506.08645"
|
||||
id="guide4712"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="320.95102,115.74667"
|
||||
orientation="-55.241507,0"
|
||||
id="guide4714"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="320.95102,130.36265"
|
||||
orientation="0,-506.08645"
|
||||
id="guide4716"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata4674">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-11.249983)"
|
||||
style="display:inline">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:16.93333244px;line-height:6.61458302px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#519aed;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="199.04521"
|
||||
y="136.83821"
|
||||
id="text4702"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4700"
|
||||
x="199.04521"
|
||||
y="136.83821"
|
||||
style="font-size:16.93333244px;fill:#519aed;fill-opacity:1;stroke-width:0.26458332px">... Loading ...</tspan></text>
|
||||
<path
|
||||
style="fill:#519aed;fill-opacity:1;stroke-width:0.99999994"
|
||||
d="m 706.95703,587.29102 a 27.620748,27.620707 0 0 0 -27.62109,27.62109 27.620748,27.620707 0 0 0 27.62109,27.61914 v 0.002 H 1213.043 a 27.620748,27.620707 0 0 0 27.6211,-27.62109 27.620748,27.620707 0 0 0 -27.6211,-27.62109 z"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,0,11.249983)"
|
||||
id="rect4718"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
sodipodi:type="inkscape:offset"
|
||||
inkscape:radius="-6.0606828"
|
||||
inkscape:original="M 706.95703 587.29102 A 27.620748 27.620707 0 0 0 679.33594 614.91211 A 27.620748 27.620707 0 0 0 706.95703 642.53125 L 706.95703 642.5332 L 1213.043 642.5332 A 27.620748 27.620707 0 0 0 1240.6641 614.91211 A 27.620748 27.620707 0 0 0 1213.043 587.29102 L 706.95703 587.29102 z "
|
||||
style="fill:#283f5c;fill-opacity:1;stroke-width:0.99999994;filter:url(#filter4935)"
|
||||
id="path4727"
|
||||
d="m 706.95703,593.35156 c -5.64451,-7e-5 -11.25483,2.32319 -15.24609,6.31446 -3.99127,3.99126 -6.31453,9.6016 -6.31446,15.24609 3.2e-4,5.64424 2.32518,11.2532 6.31641,15.24414 3.99123,3.99094 9.59989,6.31452 15.24414,6.31445 a 6.0612888,6.0612888 0 0 1 0.041,0.002 H 1213.043 c 5.6445,7e-5 11.2548,-2.32319 15.2461,-6.31446 3.9912,-3.99126 6.3145,-9.6016 6.3144,-15.24609 10e-5,-5.6445 -2.3232,-11.25483 -6.3144,-15.24609 -3.9913,-3.99127 -9.6016,-6.31453 -15.2461,-6.31446 z"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,0,11.249983)" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer4"
|
||||
inkscape:label="Full"
|
||||
style="display:inline">
|
||||
<path
|
||||
d="m 706.95703,593.35156 c -5.64451,-7e-5 -11.25483,2.32319 -15.24609,6.31446 -3.99127,3.99126 -6.31453,9.6016 -6.31446,15.24609 3.2e-4,5.64424 2.32518,11.2532 6.31641,15.24414 3.99123,3.99094 9.59989,6.31452 15.24414,6.31445 a 6.0612888,6.0612888 0 0 1 0.041,0.002 H 1213.043 c 5.6445,7e-5 11.2548,-2.32319 15.2461,-6.31446 3.9912,-3.99126 6.3145,-9.6016 6.3144,-15.24609 10e-5,-5.6445 -2.3232,-11.25483 -6.3144,-15.24609 -3.9913,-3.99127 -9.6016,-6.31453 -15.2461,-6.31446 z"
|
||||
id="path4731"
|
||||
style="fill:url(#linearGradient4741);fill-opacity:1;stroke-width:0.99999994;filter:url(#filter5229)"
|
||||
inkscape:original="M 706.95703 587.29102 A 27.620748 27.620707 0 0 0 679.33594 614.91211 A 27.620748 27.620707 0 0 0 706.95703 642.53125 L 706.95703 642.5332 L 1213.043 642.5332 A 27.620748 27.620707 0 0 0 1240.6641 614.91211 A 27.620748 27.620707 0 0 0 1213.043 587.29102 L 706.95703 587.29102 z "
|
||||
inkscape:radius="-6.0606828"
|
||||
sodipodi:type="inkscape:offset"
|
||||
transform="scale(0.26458333)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
BIN
out/assets/images/preload/bar-background.png
Normal file
BIN
out/assets/images/preload/bar-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
out/assets/images/preload/bar-content.png
Normal file
BIN
out/assets/images/preload/bar-content.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -23,23 +23,17 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="-space-tac" class="game"></div>
|
||||
|
||||
<script src="vendor/jasmine-core/lib/jasmine-core/jasmine.js"></script>
|
||||
<script src="vendor/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
|
||||
<script src="vendor/jasmine-core/lib/jasmine-core/boot.js"></script>
|
||||
<script src="vendor/phaser/build/phaser.js"></script>
|
||||
<script src="vendor/phaser/build/phaser.min.js"></script>
|
||||
<script src="build.js"></script>
|
||||
|
||||
<script>
|
||||
var currentWindowOnload = window.onload;
|
||||
window.oncontextmenu = function (e) { e.preventDefault(); };
|
||||
window.onload = function () {
|
||||
new SpaceTac.GameUI();
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<script src="vendor/jasmine-core/lib/jasmine-core/jasmine.js"></script>
|
||||
<script src="vendor/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
|
||||
<script src="vendor/jasmine-core/lib/jasmine-core/boot.js"></script>
|
||||
<script src="vendor/phaser/build/phaser.js"></script>
|
||||
<script src="vendor/phaser/build/custom/phaser.min.js"></script>
|
||||
<script src="build.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
/// <reference path="../typings/index.d.ts"/>
|
||||
|
||||
if (typeof window != "undefined") {
|
||||
(<any>window).describe = (<any>window).describe || function () { };
|
||||
}
|
||||
|
||||
module SpaceTac {
|
||||
// Router between game views
|
||||
export class GameUI extends Phaser.Game {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
module SpaceTac.View {
|
||||
export class Boot extends Phaser.State {
|
||||
preload() {
|
||||
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
|
||||
this.game.stage.backgroundColor = 0x202020;
|
||||
|
||||
this.add.text(this.world.width / 2, this.world.height / 2 - 40, "... Loading ...", { align: "center", font: "bold 20px Arial", fill: "#c0c0c0" })
|
||||
.anchor.set(0.5, 0.5);
|
||||
|
||||
this.load.image("preload-bar", "assets/images/preloader.gif");
|
||||
this.load.image("preload-background", "assets/images/preload/bar-background.png");
|
||||
this.load.image("preload-bar", "assets/images/preload/bar-content.png");
|
||||
}
|
||||
|
||||
create() {
|
||||
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
|
||||
this.game.stage.backgroundColor = 0x000000;
|
||||
|
||||
this.add.image(678, 426, "preload-background");
|
||||
|
||||
this.input.maxPointers = 1;
|
||||
this.stage.disableVisibilityChange = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,12 @@
|
|||
|
||||
module SpaceTac.View {
|
||||
export class Preload extends BaseView {
|
||||
private preloadBar: Phaser.Sprite;
|
||||
private preloadBar: Phaser.Image;
|
||||
|
||||
preload() {
|
||||
// Add preload sprite
|
||||
this.add.text(this.getMidWidth(), this.getMidHeight() - 40, "... Loading ...", { align: "center", font: "bold 20px Arial", fill: "#c0c0c0" })
|
||||
.anchor.set(0.5, 0.5);
|
||||
this.preloadBar = this.add.sprite(0, 0, "preload-bar");
|
||||
this.preloadBar.anchor.set(0.5, 0.5);
|
||||
this.preloadBar.position.set(this.getMidWidth(), this.getMidHeight());
|
||||
let bg = this.add.image(678, 426, "preload-background");
|
||||
this.preloadBar = this.add.image(684, bg.y + 166, "preload-bar");
|
||||
this.load.setPreloadSprite(this.preloadBar);
|
||||
|
||||
// Load images
|
||||
|
|
@ -75,6 +72,7 @@ module SpaceTac.View {
|
|||
// Load musics
|
||||
this.loadSound("music/walking-along.mp3");
|
||||
this.loadSound("music/full-on.mp3");
|
||||
this.load.start();
|
||||
}
|
||||
|
||||
create() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue