SVG Game creation tutorial - a slot machine
this is a tutorial to show you how to create a simple browser based game using SVG.
first of all this is the game we will create:
i started by picking 4 images from the OpenClipart Library. i' chosen the following images:
then i've made up a first coordinate space in wich to develop the game i began by using a viewBox of "0 0 300 100"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
</svg>
nex up insert one image from the chosen pngs 3 times at the appropriate positions. as we have a space of 300x100 one image is 100x100 and each image is offset by 100 from the last image.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
<image xlink:href="orange.png" x="0" y="0" width="100" height="100"/>
<image xlink:href="orange.png" x="100" y="0" width="100" height="100"/>
<image xlink:href="orange.png" x="200" y="0" width="100" height="100"/>
</svg>
now to create the cylinder, we add two rects in the background with some rx/ry settings.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
<rect x="0" y="0" width="300" height="100" rx="10" ry="50" fill="white" stroke="black"/>
<rect x="100" y="0" width="100" height="100" rx="10" ry="50" fill="white" stroke="black"/>
<image xlink:href="orange.png" x="0" y="0" width="100" height="100"/>
<image xlink:href="orange.png" x="100" y="0" width="100" height="100"/>
<image xlink:href="orange.png" x="200" y="0" width="100" height="100"/>
</svg>
now add a linear gradient so it looks more like a cylinder:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
<linearGradient id="lg2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#666"/>
<stop offset="0.5" stop-color="white"/>
<stop offset="1" stop-color="#666"/>
</linearGradient>
<rect x="0" y="0" width="300" height="100" rx="10" ry="50" fill="url(#lg2)" stroke="black"/>
<rect x="100" y="0" width="100" height="100" rx="10" ry="50" fill="url(#lg2)" stroke="black"/>
<image xlink:href="orange.png" x="0" y="0" width="100" height="100"/>
<image xlink:href="orange.png" x="100" y="0" width="100" height="100"/>
<image xlink:href="orange.png" x="200" y="0" width="100" height="100"/>
</svg>
to create the blury effect ive also used SVG , but for performance reasons i chose to create 4 additional SVG wich i then rendered to png using Batik. for that i had an SVG referencing two of the images(example SVG) ;one offset 50 upwards and one 50 down, and applyed a feGaussianBlur filter to both of the images with an stdDeviation of "1,15"
the result looks like this:
in order to make ore svg useable for the game we have to now clean up a bit. we will add our gradient and all images needed to a defs section, replace the images with use-elements, and add some ids. this should result in an SVG as follows:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
<defs>
<linearGradient id="lg2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#666"/>
<stop offset="0.5" stop-color="white"/>
<stop offset="1" stop-color="#666"/>
</linearGradient>
<image id="i1o" xlink:href="grape_01.png" x="0" y="0" width="100" height="100"/>
<image id="i2o" xlink:href="orange.png" x="0" y="0" width="100" height="100"/>
<image id="i3o" xlink:href="strawberry_01.png" x="0" y="0" width="100" height="100"/>
<image id="i4o" xlink:href="apple.png" x="0" y="0" width="100" height="100"/>
<image id="i1" xlink:href="spin1.png" x="0" y="0" width="100" height="100"/>
<image id="i2" xlink:href="spin2.png" x="0" y="0" width="100" height="100"/>
<image id="i3" xlink:href="spin3.png" x="0" y="0" width="100" height="100"/>
<image id="i4" xlink:href="spin4.png" x="0" y="0" width="100" height="100"/>
</defs>
<rect x="0" y="0" width="300" height="100" rx="10" ry="50" fill="url(#lg2)" stroke="black"/>
<rect x="100" y="0" width="100" height="100" rx="10" ry="50" fill="url(#lg2)" stroke="black"/>
<use id="u1" xlink:href="#i1o" x="0" y="0" width="100" height="100"/>
<use id="u2" xlink:href="#i1o" x="100" y="0" width="100" height="100"/>
<use id="u3" xlink:href="#i1o" x="200" y="0" width="100" height="100"/>
</svg>
now to loop one image we can use this simple script:
xlns="http://www.w3.org/1999/xlink"
var ctime=0
setTimeout("run()",100)
function run(){
ctime++
var i=ctime % 4 + 1
document.getElementById("u1").setAttributeNS(xlns,"href","#i"+i)
setTimeout("run()",100)
}
here is the last example with this script added: example
Thanks for your time.
Holger Will
learn how to implement the game logic and add some more SVG spice in part 2 of this tutorial.
|
