Inkscapeを作ったキャラクターをブラウザでウォークアニメーションさせる方法

2019年5月23日

テクノロジー

ブラウザゲーム制作をしていて、画像を全てSVGで対応するという仕様に対して、ゲームキャラクターアニメーションは通常画像の場合は、パターン分のpngを用意するか、アニメーション単位でのGIF画像を使って行うのですが、SVGフォーマットは内部に階層も持てるし、スタイルセットも行える、これを使わない手はないと考え、1ファイルで静止画からアニメーションまで対応できる方式を確立しようと考えた。 条件としては、「画像ファイルを1つにして、親要素の属性値切り替えで、方向切替や、各種アニメーションを行えるようにする」という事で、サンプルを作ってみたので、それを公開しておきます。 もう一つの条件としては、SVG画像の作成は、InkScapeを使うのが効率的なので、後から修正ができるという事も想定しておきたい。 SVG画像を修正して上書き保存したら、アニメーションデータが消えてしまうというのは、トラブルに繋がりかねない。

Inkscape作業

世の中的には、ピクセル画像操作は「Photoshop」、Draw系データ操作は「Illustrator」を使うというのがセオリーなのだが、SVGデータを作成するには、Inkscapeが最も適している。 何故なら、Inkscapeは、データ保存の標準フォーマットがsvgで行うようになっており、svg仕様に準拠している為である。 こんな便利なツールがあるのに、Illustratorを使ってsvgデータを出力しているデザイナーを見ると、もう少し幅を広げたほうがいいのに・・・と考えてしまいますが、これは僕の心の中だけで考えるようにします。 ここでは、キャラクターデータの作り方ですが、Inkscapeの使い方をレクチャーするのは行なわず、出来上がったsvgデータを元に解説します。 <?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="64" height="64" viewBox="0 0 16.933333 16.933333" version="1.1" id="svg8" inkscape:version="0.92.2 5c3e80d, 2017-08-06" sodipodi:docname="test2.svg"> <style> #chara .chara > .down .w1{visibility:hidden;} #chara .chara > .down .w2{visibility:hidden;} #chara .chara > .down .w3{visibility:hidden;} #chara .chara > .up .w1{visibility:hidden;} #chara .chara > .up .w2{visibility:hidden;} #chara .chara > .up .w3{visibility:hidden;} #chara .chara > .right .w1{visibility:hidden;} #chara .chara > .right .w2{visibility:hidden;} #chara .chara > .right .w3{visibility:hidden;} #chara .chara > .left .w1{visibility:hidden;} #chara .chara > .left .w2{visibility:hidden;} #chara .chara > .left .w3{visibility:hidden;} .chara > .down .w1{ visibility:visible; } </style> <defs id="defs2"> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-9" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-3" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-0" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-0" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-1" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-5" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-4" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-8" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-5" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-50" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-8" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-6" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-95" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-1" /> </marker> <marker inkscape:isstock="true" style="overflow:visible" id="Arrow1Lstart-83" refX="0.0" refY="0.0" orient="auto" inkscape:stockid="Arrow1Lstart"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " id="path4773-7" /> </marker> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="6.44" inkscape:cx="34.475174" inkscape:cy="32.436019" inkscape:document-units="pt" inkscape:current-layer="svg8" showgrid="true" showguides="false" units="px" inkscape:window-width="1141" inkscape:window-height="651" inkscape:window-x="18" inkscape:window-y="13" inkscape:window-maximized="0"> <inkscape:grid type="xygrid" id="grid4747" spacingx="0.52916666" spacingy="0.52916666" dotted="false" /> </sodipodi:namedview> <metadata id="metadata5"> <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 /> </cc:Work> </rdf:RDF> </metadata> <g inkscape:groupmode="layer" id="layer6" inkscape:label="shadow" style="display:inline" sodipodi:insensitive="true"> <ellipse style="opacity:1;fill:#1e1e1e;fill-opacity:0.59448823;fill-rule:nonzero;stroke:none;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path5089" cx="8.3154764" cy="13.005668" rx="4.4979167" ry="1.8520833" /> </g> <g class="chara" data-anim-type="pause-down" inkscape:label="chara" transform="translate(0.52916672)"> <g inkscape:groupmode="layer" id="layer9" class="down" inkscape:label="down" style="display:inline"> <g inkscape:groupmode="layer" id="layer8" inkscape:label="w3" class="w3" style="display:inline"> <g id="g1758"> <g inkscape:label="human foot" id="layer4-3"> <ellipse transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="14.133186" cx="0.59078503" id="path5064-9" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-6" cx="0.95616299" cy="16.105448" rx="1.6126438" ry="0.70119208" transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-6" inkscape:label="human hand-R"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-4" cx="4.0435233" cy="11.189737" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-0"> <ellipse ry="1.5875" rx="1.8520833" cy="11.112499" cx="7.6729164" id="path4771-8" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> <circle r="0.52916664" cy="11.40009" cx="6.7559133" id="path5061-2" style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" /> </g> <g inkscape:label="human hand-L" id="layer5-0"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-6" cx="10.781359" cy="11.10757" rx="1.0016369" ry="0.94001031" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-0"> <ellipse ry="3.7041667" rx="4.2333331" cy="6.3068566" cx="6.7928796" id="path4769-7" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" inkscape:connector-curvature="0" id="path4764-2" d="m 4.2333333,4.7624998 v 1.5875001 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 7.4083332,5.8208331 v 1.5875 0" id="path4766-9" inkscape:connector-curvature="0" /> <path sodipodi:nodetypes="cscc" inkscape:connector-curvature="0" id="path4768-8" d="m 4.2333333,7.9374998 c 0,0 0.2514363,0.9761646 1.3097697,0.9761646 1.0583333,0 1.3360636,-0.446998 1.3360636,-0.446998 v 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer7" inkscape:label="w2" class="w2" style="display:inline"> <g id="g1634"> <g inkscape:label="human shadow" id="layer6-2" /> <g inkscape:label="human foot" id="layer4-2"> <ellipse transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="14.115992" cx="-1.4747466" id="path5064-7" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-1" cx="2.1396449" cy="16.125828" rx="1.6126438" ry="0.70119208" transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-0" inkscape:label="human hand-R"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-0" cx="5.7690663" cy="10.573473" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-9"> <ellipse ry="1.5875" rx="1.8520833" cy="11.1125" cx="7.6729164" id="path4771-7" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> <circle r="0.52916664" cy="11.400091" cx="6.7559133" id="path5061-1" style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" /> </g> <g inkscape:label="human hand-L" id="layer5-7"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-4" cx="8.7271404" cy="12.504439" rx="1.0016369" ry="0.94001031" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-5"> <ellipse ry="3.7041667" rx="4.2333331" cy="6.3068566" cx="6.7928796" id="path4769-1" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" inkscape:connector-curvature="0" id="path4764-7" d="m 4.2333333,4.7624998 v 1.5875001 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 7.4083332,5.8208331 v 1.5875 0" id="path4766-8" inkscape:connector-curvature="0" /> <path sodipodi:nodetypes="cscc" inkscape:connector-curvature="0" id="path4768-2" d="m 4.2333333,7.9374998 c 0,0 0.2514363,0.9761646 1.3097697,0.9761646 1.0583333,0 1.3360636,-0.446998 1.3360636,-0.446998 v 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer1" inkscape:label="w1" class="w1" style="display:inline"> <g inkscape:groupmode="layer" id="layer4" inkscape:label="human foot" style="display:inline"> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="path5064" cx="0.59078503" cy="14.133186" rx="1.6126438" ry="0.70119208" transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" /> <ellipse transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="16.125828" cx="2.1396449" id="ellipse5066" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> </g> <g inkscape:label="human hand-R" id="g5077" inkscape:groupmode="layer" style="display:inline"> <ellipse ry="0.94001031" rx="1.0016369" cy="10.249727" cx="6.4576406" id="ellipse5073" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> </g> <g inkscape:groupmode="layer" id="layer3" inkscape:label="human body"> <ellipse style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" id="path4771" cx="8.7312498" cy="10.583333" rx="1.8520833" ry="1.5875" /> <circle style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path5061" cx="7.8142467" cy="10.870924" r="0.52916664" /> </g> <g inkscape:groupmode="layer" id="layer5" inkscape:label="human hand-L"> <ellipse ry="0.94001031" rx="1.0016369" cy="11.893104" cx="10.68933" id="ellipse5071" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> </g> <g inkscape:groupmode="layer" id="layer2" inkscape:label="human head" style="display:inline"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" id="path4769" cx="7.851213" cy="5.7776899" rx="4.2333331" ry="3.7041667" /> <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 5.2916666,4.2333332 v 1.5875001 0" id="path4764" inkscape:connector-curvature="0" sodipodi:nodetypes="ccc" /> <path inkscape:connector-curvature="0" id="path4766" d="m 8.4666665,5.2916665 v 1.5875 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" sodipodi:nodetypes="ccc" /> <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 5.2916666,7.4083332 c 0,0 0.2514363,0.9761646 1.3097697,0.9761646 1.0583333,0 1.3360636,-0.446998 1.3360636,-0.446998 v 0" id="path4768" inkscape:connector-curvature="0" sodipodi:nodetypes="cscc" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer10" class="up" inkscape:label="up" style="display:inline"> <g inkscape:groupmode="layer" id="layer13" class="w1" inkscape:label="w1" style="display:inline"> <g id="g1076" transform="translate(-1.2892233,-0.28421801)"> <g inkscape:label="human foot" id="layer4-9"> <ellipse transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="14.622814" cx="1.5388193" id="path5064-71" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-7" cx="3.2897296" cy="16.582188" rx="1.6126438" ry="0.70119208" transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-4" inkscape:label="human hand-R"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-5" cx="6.6532025" cy="10.865993" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-1"> <ellipse ry="1.5875" rx="1.8520833" cy="10.706586" cx="9.0500641" id="path4771-78" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-2"> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 12.7,4.2333331 v 1.5875 0" id="path4766-5" inkscape:connector-curvature="0" /> <ellipse ry="3.7041667" rx="4.2333331" cy="6.3068566" cx="8.9095459" id="path4769-4" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> </g> <g inkscape:label="human hand-L" id="layer5-5"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-3" cx="10.884891" cy="11.810935" rx="1.0016369" ry="0.94001031" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer14" class="w2" inkscape:label="w2" style="display:inline"> <g id="g1191" transform="translate(-1.0583328,-0.52916666)"> <g inkscape:label="human foot" id="layer4-20"> <ellipse transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="14.342919" cx="3.2955816" id="path5064-6" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-0" cx="3.2897296" cy="16.582188" rx="1.6126438" ry="0.70119208" transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-7" inkscape:label="human hand-R"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-2" cx="6.0730915" cy="9.9670668" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-98"> <ellipse ry="1.5875" rx="1.8520833" cy="10.17742" cx="9.5792303" id="path4771-1" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-1"> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 13.229166,3.7041665 v 1.5875 0" id="path4766-6" inkscape:connector-curvature="0" /> <ellipse ry="3.7041667" rx="4.2333331" cy="5.7776899" cx="9.4387121" id="path4769-11" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> </g> <g inkscape:label="human hand-L" id="layer5-8"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-1" cx="12.810925" cy="10.172491" rx="1.0016369" ry="0.94001031" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer15" class="w3" inkscape:label="w3" style="display:inline"> <g id="g1306" transform="translate(-1.0583332,-0.52916668)"> <g inkscape:label="human foot" id="layer4-4"> <ellipse transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="14.622814" cx="1.5388193" id="path5064-3" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-77" cx="5.1702785" cy="16.136858" rx="1.6126438" ry="0.70119208" transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-5" inkscape:label="human hand-R"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-1" cx="8.081295" cy="9.2275486" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-2"> <ellipse ry="1.5875" rx="1.8520833" cy="10.17742" cx="10.108397" id="path4771-6" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-6"> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 13.758333,3.7041665 v 1.5875 0" id="path4766-54" inkscape:connector-curvature="0" /> <ellipse ry="3.7041667" rx="4.2333331" cy="5.7776899" cx="9.9678793" id="path4769-17" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> </g> <g inkscape:label="human hand-L" id="layer5-1"> <ellipse style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-34" cx="11.24479" cy="11.651528" rx="1.0016369" ry="0.94001031" /> </g> </g> </g> </g> <g inkscape:groupmode="layer" id="layer11" class="right" inkscape:label="right" style="display:inline"> <g inkscape:groupmode="layer" id="layer16" class="w1" inkscape:label="w1" style="display:inline"> <g id="g1462" transform="translate(-1.4476081,-0.01963466)"> <g inkscape:label="human foot" id="layer4-0"> <ellipse transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="6.0543289" cx="-15.051784" id="path5064-1" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-9" cx="-13.502924" cy="8.0469704" rx="1.6126438" ry="0.70119208" transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-57" inkscape:label="human hand-R"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-6" cx="-11.00486" cy="10.249727" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-8"> <ellipse transform="scale(-1,1)" ry="1.5875" rx="1.8520833" cy="10.583333" cx="-8.7312508" id="path4771-5" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> <circle transform="scale(-1,1)" r="0.52916664" cy="10.870924" cx="-9.6482534" id="path5061-4" style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" /> </g> <g inkscape:label="human hand-L" id="layer5-79"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-66" cx="-6.77317" cy="11.893104" rx="1.0016369" ry="0.94001031" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-66"> <ellipse transform="scale(-1,1)" ry="3.7041667" rx="4.2333331" cy="5.7776899" cx="-9.6112871" id="path4769-70" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" inkscape:connector-curvature="0" id="path4764-4" d="m 12.170833,4.2333331 v 1.5875001 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 8.9958337,5.2916664 v 1.5875 0" id="path4766-1" inkscape:connector-curvature="0" /> <path sodipodi:nodetypes="cscc" inkscape:connector-curvature="0" id="path4768-0" d="m 12.170833,7.4083331 c 0,0 -0.251436,0.9761646 -1.309769,0.9761646 -1.0583334,0 -1.3360637,-0.446998 -1.3360637,-0.446998 v 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer17" class="w2" inkscape:label="w2" style="display:inline"> <g id="g1600" transform="translate(-1.5874995)"> <g inkscape:label="human foot" id="layer4-8"> <ellipse transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="6.0371346" cx="-17.117315" id="path5064-4" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-5" cx="-13.502924" cy="8.0469713" rx="1.6126438" ry="0.70119208" transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-8" inkscape:label="human hand-R"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-8" cx="-11.693434" cy="10.573473" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-94"> <ellipse transform="scale(-1,1)" ry="1.5875" rx="1.8520833" cy="11.1125" cx="-9.7895832" id="path4771-70" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> <circle transform="scale(-1,1)" r="0.52916664" cy="11.400091" cx="-10.706587" id="path5061-40" style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" /> </g> <g inkscape:label="human hand-L" id="layer5-6"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-5" cx="-8.7353592" cy="12.504439" rx="1.0016369" ry="0.94001031" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-3"> <ellipse transform="scale(-1,1)" ry="3.7041667" rx="4.2333331" cy="6.3068566" cx="-10.669621" id="path4769-8" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" inkscape:connector-curvature="0" id="path4764-5" d="m 13.229166,4.7624998 v 1.5875001 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 10.054167,5.8208331 v 1.5875 0" id="path4766-12" inkscape:connector-curvature="0" /> <path sodipodi:nodetypes="cscc" inkscape:connector-curvature="0" id="path4768-4" d="m 13.229166,7.9374998 c 0,0 -0.251436,0.9761646 -1.309769,0.9761646 -1.058334,0 -1.336064,-0.446998 -1.336064,-0.446998 v 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer18" class="w3" inkscape:label="w3" style="display:inline"> <g id="g1742" transform="translate(-1.5874994)"> <g inkscape:label="human foot" id="layer4-97" transform="translate(-4.0000017e-8,-0.52916666)"> <ellipse transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="6.5235777" cx="-15.28723" id="path5064-5" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-3" cx="-14.921852" cy="8.4958391" rx="1.6126438" ry="0.70119208" transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-9" inkscape:label="human hand-R" transform="translate(-4.0000017e-8,-0.52916666)"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-9" cx="-13.418977" cy="11.718904" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-4" transform="translate(-4.0000017e-8,-0.52916666)"> <ellipse transform="scale(-1,1)" ry="1.5875" rx="1.8520833" cy="11.641665" cx="-9.7895832" id="path4771-9" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> <circle transform="scale(-1,1)" r="0.52916664" cy="11.929256" cx="-10.706586" id="path5061-15" style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" /> </g> <g inkscape:label="human hand-L" id="layer5-9" transform="translate(-4.0000017e-8,-0.52916666)"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-8" cx="-6.6811404" cy="11.636736" rx="1.0016369" ry="0.94001031" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-30" transform="translate(-4.0000017e-8,-0.52916666)"> <ellipse transform="scale(-1,1)" ry="3.7041667" rx="4.2333331" cy="6.8360233" cx="-10.669621" id="path4769-9" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" inkscape:connector-curvature="0" id="path4764-0" d="m 13.229166,5.2916665 v 1.5875001 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 10.054166,6.3499998 v 1.5875 0" id="path4766-7" inkscape:connector-curvature="0" /> <path sodipodi:nodetypes="cscc" inkscape:connector-curvature="0" id="path4768-6" d="m 13.229166,8.4666665 c 0,0 -0.251436,0.9761646 -1.30977,0.9761646 -1.058333,0 -1.336063,-0.446998 -1.336063,-0.446998 v 0" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> </g> </g> </g> </g> <g inkscape:groupmode="layer" id="layer12" class="left" inkscape:label="left" style="display:inline"> <g inkscape:groupmode="layer" id="layer19" class="w1" inkscape:label="w1" style="display:inline"> <g id="g1883" transform="translate(-0.35659186)"> <g inkscape:label="human foot" id="layer4-975"> <ellipse transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="6.3789835" cx="-14.423178" id="path5064-52" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-4" cx="-12.672267" cy="8.338357" rx="1.6126438" ry="0.70119208" transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-94" inkscape:label="human hand-R"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-47" cx="-11.165889" cy="10.865993" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-95"> <ellipse transform="scale(-1,1)" ry="1.5875" rx="1.8520833" cy="10.706586" cx="-8.7690277" id="path4771-56" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-15"> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 5.1190918,4.2333331 v 1.5875 0" id="path4766-91" inkscape:connector-curvature="0" /> <ellipse transform="scale(-1,1)" ry="3.7041667" rx="4.2333331" cy="6.3068566" cx="-8.9095459" id="path4769-3" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> </g> <g inkscape:label="human hand-L" id="layer5-88"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-9" cx="-6.9342012" cy="11.810935" rx="1.0016369" ry="0.94001031" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer20" class="w2" inkscape:label="w2" style="display:inline"> <g id="g2030" transform="translate(-0.65486846,-0.24494861)"> <g inkscape:label="human foot" id="layer4-6"> <ellipse transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="6.0192485" cx="-12.821004" id="path5064-0" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-32" cx="-12.826856" cy="8.2585173" rx="1.6126438" ry="0.70119208" transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-2" inkscape:label="human hand-R"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-14" cx="-11.918574" cy="9.9670668" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-7"> <ellipse transform="scale(-1,1)" ry="1.5875" rx="1.8520833" cy="10.17742" cx="-8.4124355" id="path4771-709" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-57"> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 4.7624999,3.7041665 v 1.5875 0" id="path4766-2" inkscape:connector-curvature="0" /> <ellipse transform="scale(-1,1)" ry="3.7041667" rx="4.2333331" cy="5.7776899" cx="-8.5529537" id="path4769-97" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> </g> <g inkscape:label="human hand-L" id="layer5-68"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-2" cx="-5.1807413" cy="10.172491" rx="1.0016369" ry="0.94001031" /> </g> </g> </g> <g inkscape:groupmode="layer" id="layer21" class="w3" inkscape:label="w3" style="display:inline"> <g id="g2181" transform="translate(-0.65486856,-0.24494859)"> <g inkscape:label="human foot" id="layer4-65" transform="translate(0,0.52916666)"> <ellipse transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" ry="0.70119208" rx="1.6126438" cy="5.829895" cx="-14.342319" id="path5064-04" style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" /> <ellipse style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5066-51" cx="-10.710859" cy="7.3439388" rx="1.6126438" ry="0.70119208" transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" /> </g> <g style="display:inline" id="g5077-23" inkscape:label="human hand-R" transform="translate(0,0.52916666)"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5073-7" cx="-9.9103708" cy="8.6983824" rx="1.0016369" ry="0.94001031" /> </g> <g inkscape:label="human body" id="layer3-24" transform="translate(0,0.52916666)"> <ellipse transform="scale(-1,1)" ry="1.5875" rx="1.8520833" cy="9.6482534" cx="-7.8832698" id="path4771-18" style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" /> </g> <g style="display:inline" inkscape:label="human head" id="layer2-26" transform="translate(0,0.52916666)"> <path sodipodi:nodetypes="ccc" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 4.2333333,3.1749998 v 1.5875 0" id="path4766-0" inkscape:connector-curvature="0" /> <ellipse transform="scale(-1,1)" ry="3.7041667" rx="4.2333331" cy="5.2485232" cx="-8.0237865" id="path4769-39" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> </g> <g inkscape:label="human hand-L" id="layer5-4" transform="translate(0,0.52916666)"> <ellipse transform="scale(-1,1)" style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" id="ellipse5071-96" cx="-6.7468762" cy="11.122362" rx="1.0016369" ry="0.94001031" /> </g> </g> </g> </g> </g> </svg> test.svgというデータを作りましたが、レイヤーでパターン分の画像をインポートして区分けしています。 完成したsvgデータをテキストエディタで開いて、"inkscape:label"という属性を探します。 Inkscapeのレイヤーに付けた名前は、inkscape:label="**"という属性で記述されるので、その横にcssで扱いやすいように、class属性を手作業で追加します。 Inkscapeでclass名まで設置できたら便利だったのに・・・

事前にライブラリを準備

一般的なjQueryを使って準備してもいいのですが、ライブラリ容量を増やしたくないのと、ピンポイントな機能を実現したいので、以下の22ファイルを用意しました。 ;$$MYNT_AJAX = (function(){ /** * Ajax * $$MYNT_AJAX | $$ajax({ * url:"", // "http://***" * method:"POST", // POST or GET * async:true, // true or false * data:{}, // Object * query:{}, // Object * querys:[] // Array * }); */ var $$ajax = function(options){ if(!options){return} var ajax = new $$ajax; var httpoj = $$ajax.prototype.createHttpRequest(); if(!httpoj){return;} // open メソッド; var option = ajax.setOption(options); // 実行 httpoj.open( option.method , option.url , option.async ); // type httpoj.setRequestHeader('Content-Type', option.type); // onload-check httpoj.onreadystatechange = function(){ //readyState値は4で受信完了; if (this.readyState==4){ //コールバック option.onSuccess(this.responseText); } }; //query整形 var data = ajax.setQuery(option); //send メソッド if(data.length){ httpoj.send(data.join("&")); } else{ httpoj.send(); } }; $$ajax.prototype.dataOption = { url:"", query:{}, // same-key Nothing querys:[], // same-key OK data:{}, // ETC-data event受渡用 async:"true", // [trye:非同期 false:同期] method:"POST", // [POST / GET] type:"application/x-www-form-urlencoded", // [text/javascript]... onSuccess:function(res){}, onError:function(res){} }; $$ajax.prototype.option = {}; $$ajax.prototype.createHttpRequest = function(){ //Win ie用 if(window.ActiveXObject){ //MSXML2以降用; try{return new ActiveXObject("Msxml2.XMLHTTP")} catch(e){ //旧MSXML用; try{return new ActiveXObject("Microsoft.XMLHTTP")} catch(e2){return null} } } //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用; else if(window.XMLHttpRequest){return new XMLHttpRequest()} else{return null} }; $$ajax.prototype.setOption = function(options){ var option = {}; for(var i in this.dataOption){ if(typeof options[i] != "undefined"){ option[i] = options[i]; } else{ option[i] = this.dataOption[i]; } } return option; }; $$ajax.prototype.setQuery = function(option){ var data = []; if(typeof option.query != "undefined"){ for(var i in option.query){ data.push(i+"="+encodeURIComponent(option.query[i])); } } if(typeof option.querys != "undefined"){ for(var i=0;i<option.querys.length;i++){ if(typeof option.querys[i] == "Array"){ data.push(option.querys[i][0]+"="+encodeURIComponent(option.querys[i][1])); } else{ var sp = option.querys[i].split("="); data.push(sp[0]+"="+encodeURIComponent(sp[1])); } } } return data; }; $$ajax.prototype.loadHTML = function(filePath , selector){ $$ajax({ url:filePath+"?"+(+new Date()), method:"GET", async:false, data:{ selector:selector }, async:true, onSuccess:function(res){ var target = document.querySelector(this.data.selector); if(!target){return;} // resをelementに変換 var div1 = document.createElement("div"); var div2 = document.createElement("div"); div1.innerHTML = res; // script抜き出し var scripts = div1.getElementsByTagName("script"); while(scripts.length){ div2.appendChild(scripts[0]); } // script以外 target.innerHTML = ""; target.appendChild(div1); // script $$ajax.prototype.orderScript(div2 , target); } }); }; $$ajax.prototype.orderScript = function(tags , target){ if(!tags.childNodes.length){return;} var div = document.createElement("div"); var newScript = document.createElement("script"); if(tags.childNodes[0].innerHTML){newScript.innerHTML = tags.childNodes[0].innerHTML;} // Attributes var attrs = tags.childNodes[0].attributes; for(var i=0; i<attrs.length; i++){ newScript.setAttribute(attrs[i].name , attrs[i].value); } if(typeof tags.childNodes[0].src === "undefined"){ target.appendChild(newScript); div.appendChild(tags.childNodes[0]); $$ajax.prototype.orderScript(tags , target); } else{ newScript.onload = function(){ $$ajax.prototype.orderScript(tags , target); }; target.appendChild(newScript); div.appendChild(tags.childNodes[0]); } }; return $$ajax; })(); ;$$SVG = (function(){ // ページ内にjsライブラリの読み込み var $$addScript = function(file){ var s = document.createElement("script"); s.src = file; document.body.appendChild(s); } // イベントライブラリ var $$event = function(target, mode, func){ //other Browser if (typeof target.addEventListener !== "undefined"){ target.addEventListener(mode, func, false); } else if(typeof target.attachEvent !== "undefined"){ target.attachEvent('on' + mode, function(){func.call(target , window.event)}); } }; // svgLoad var $$init = function(){ switch(document.readyState){ case "complete": new $$().autoset(); break; case "interactive": $$event(window , "DOMContentLoaded" , (function(e){new $$().autoset()}).bind(this)); break; default: $$event(window , "load" , (function(e){new $$().autoset()}).bind(this)); break; } }; var $$ = function(options){ }; $$.prototype.autoload = function(){ switch(document.readyState){ case "complete": new $$().autoset(); break; case "interactive": $$event(window , "DOMContentLoaded" , (function(e){new $$().autoset()}).bind(this)); break; default: $$event(window , "load" , (function(e){new $$().autoset()}).bind(this)); break; } }; $$.prototype.autoset = function(){ this.changeIMG2SVG(); this.setSvgTag(); }; // ページ内のIMGタグをsvgタグに変更 $$.prototype.changeIMG2SVG = function(){ var imgTags = document.getElementsByTagName("img"); for(var i=0; i<imgTags.length; i++){ if(!imgTags[i].src){continue;} if(!imgTags[i].getAttribute("data-svg")){continue;} // svgファイル確認 var pathSplit = imgTags[i].src.split("?")[0].split("/"); var filename = pathSplit[pathSplit.length -1]; if(!filename){continue;} var extensions = filename.split("."); if(!extensions.length){continue;} var extension = extensions[extensions.length-1]; if(!extension || extension.toLowerCase() !== "svg"){continue;} new $$MYNT_AJAX({ url : imgTags[i].src, method : "get", type : "text/plane" , data : { target : imgTags[i] }, onSuccess : function(svgTag){ if(!svgTag){return;} var div = document.createElement("div"); div.innerHTML = svgTag; var elements = div.getElementsByTagName("svg"); if(!elements.length){return;} var svgElement = elements[0]; var styles = svgElement.getElementsByTagName("style"); for(var i=styles.length-1; i>=0; i--){ styles[i].parentNode.removeChild(styles[i]); } var svg = document.createElementNS("http://www.w3.org/2000/svg" , "svg"); if(svgElement.getAttribute("viewBox")){ svg.setAttribute("viewBox" , svgElement.getAttribute("viewBox")); } svg.innerHTML = svgElement.innerHTML; this.data.target.parentNode.insertBefore(svg , this.data.target); this.data.target.parentNode.removeChild(this.data.target); } }); } }; // 指定SVGタグに情報追記 $$.prototype.setSvgTag = function(options){ var svgFiles = document.getElementsByTagName("svg"); for(var i=0; i<svgFiles.length; i++){ if(!svgFiles[i].getAttribute("src")){continue;} new $$MYNT_AJAX({ url : svgFiles[i].getAttribute("src"), method : "get", type : "text/plane" , data : { target : svgFiles[i] }, onSuccess : function(svgTag){ if(!svgTag){return;} var div = document.createElement("div"); div.innerHTML = svgTag; var elements = div.getElementsByTagName("svg"); if(!elements.length){return;} var svgElement = elements[0]; var styles = svgElement.getElementsByTagName("style"); for(var i=styles.length-1; i>=0; i--){ styles[i].parentNode.removeChild(styles[i]); } var svg = this.data.target; if(svgElement.getAttribute("viewBox")){ svg.setAttribute("viewBox" , svgElement.getAttribute("viewBox")); } svg.innerHTML = svgElement.innerHTML; svg.removeAttribute("src"); } }); } }; // 指定SVGタグに情報追記 $$.prototype.svg = function(options){ if(options){ this.options = options; } var svgFiles = document.getElementsByTagName("svg"); for(var i=0; i<svgFiles.length; i++){ if(!svgFiles[i].getAttribute("src")){continue;} new $$MYNT_AJAX({ url : svgFiles[i].getAttribute("src"), method : "get", type : "text/plane" , data : { target : svgFiles[i] }, onSuccess : (function(svgTag , svgData){ if(!svgData){return;} var div = document.createElement("div"); div.innerHTML = svgData; var elements = div.getElementsByTagName("svg"); if(!elements.length){return;} var svgElement = elements[0]; // tag-remove if(typeof this.options !== "undefined"){ for(var tag in this.options){ if(this.options[tag] !== true){ var tags = svgElement.getElementsByTagName(tag); for(var i=tags.length-1; i>=0; i--){ tags[i].parentNode.removeChild(tags[i]); } } } } var svg = svgTag; if(svgElement.getAttribute("viewBox")){ svg.setAttribute("viewBox" , svgElement.getAttribute("viewBox")); } svg.innerHTML = svgElement.innerHTML; svg.removeAttribute("src"); }).bind(this , svgFiles[i]) }); } }; // new $$init; return $$; })(); 以前に記事で書いた、svgを操作可能な状態でHTMLに読み込むためのライブラリです。 imgタグで読み込んだsvgファイルをcssでコントロールできる「svgControl.js」

その他のソースコード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animation-js</title> <link rel="stylesheet" href="anim.css"> <script src="ajax.js"></script> <script src="svgControl.js"></script> <style> svg{ width:128px; height:128px; } </style> </head> <body> <svg id="chara" src="test.svg" data-anim-type="pause-down"></svg> <script> new $$SVG().svg({ style : true, defs : false, metadata : false, "sodipodi:namedview" : false }); </script> <script src="anim.js"></script> </body> </html> #chara .chara > .down .w1{visibility:hidden;} #chara .chara > .down .w2{visibility:hidden;} #chara .chara > .down .w3{visibility:hidden;} #chara .chara > .up .w1{visibility:hidden;} #chara .chara > .up .w2{visibility:hidden;} #chara .chara > .up .w3{visibility:hidden;} #chara .chara > .right .w1{visibility:hidden;} #chara .chara > .right .w2{visibility:hidden;} #chara .chara > .right .w3{visibility:hidden;} #chara .chara > .left .w1{visibility:hidden;} #chara .chara > .left .w2{visibility:hidden;} #chara .chara > .left .w3{visibility:hidden;} /* pause */ #chara[data-anim-type="pause-down"] .chara > .down .w1{ visibility:visible; } #chara[data-anim-type="pause-up"] .chara > .up .w1{ visibility:visible; } #chara[data-anim-type="pause-right"] .chara > .right .w1{ visibility:visible; } #chara[data-anim-type="pause-left"] .chara > .left .w1{ visibility:visible; } /* walk */ #chara[data-anim-type="walk-down"] .chara > .down .w1{ animation: walk-1 0.5s linear infinite; } #chara[data-anim-type="walk-down"] .chara > .down .w2{ animation: walk-2 0.5s linear infinite; } #chara[data-anim-type="walk-down"] .chara > .down .w3{ animation: walk-3 0.5s linear infinite; } #chara[data-anim-type="walk-up"] .chara > .up .w1{ animation: walk-1 0.5s linear infinite; } #chara[data-anim-type="walk-up"] .chara > .up .w2{ animation: walk-2 0.5s linear infinite; } #chara[data-anim-type="walk-up"] .chara > .up .w3{ animation: walk-3 0.5s linear infinite; } #chara[data-anim-type="walk-right"] .chara > .right .w1{ animation: walk-1 0.5s linear infinite; } #chara[data-anim-type="walk-right"] .chara > .right .w2{ animation: walk-2 0.5s linear infinite; } #chara[data-anim-type="walk-right"] .chara > .right .w3{ animation: walk-3 0.5s linear infinite; } #chara[data-anim-type="walk-left"] .chara > .left .w1{ animation: walk-1 0.5s linear infinite; } #chara[data-anim-type="walk-left"] .chara > .left .w2{ animation: walk-2 0.5s linear infinite; } #chara[data-anim-type="walk-left"] .chara > .left .w3{ animation: walk-3 0.5s linear infinite; } @keyframes walk-1{ 0%{visibility:visible;} 25%{visibility:visible;} 25.1%{visibility:hidden;} 50%{visibility:hidden;} 50.1%{visibility:visible;} 75%{visibility:visible;} 75.1%{visibility:hidden;} 100%{visibility:hidden;} } @keyframes walk-2{ 0%{visibility:hidden;} 25%{visibility:hidden;} 25.1%{visibility:visible;} 50%{visibility:visible;} 50.1%{visibility:hidden;} 100%{visibility:hidden;} } @keyframes walk-3{ 0%{visibility:hidden;} 75%{visibility:hidden;} 75.1%{visibility:visible;} 100%{visibility:visible;} } (function(){ window.addEventListener("keydown", function(e){ var chara = document.getElementById("chara"); switch(e.keyCode){ case 38:// up chara.setAttribute("data-anim-type" , "walk-up"); break; case 40:// down chara.setAttribute("data-anim-type" , "walk-down"); break; case 39:// right chara.setAttribute("data-anim-type" , "walk-right"); break; case 37:// left chara.setAttribute("data-anim-type" , "walk-left"); break; } }, false); window.addEventListener("keyup", function(e){ var chara = document.getElementById("chara"); switch(e.keyCode){ case 38:// up chara.setAttribute("data-anim-type" , "pause-up"); break; case 40:// down chara.setAttribute("data-anim-type" , "pause-down"); break; case 39:// right chara.setAttribute("data-anim-type" , "pause-right"); break; case 37:// left chara.setAttribute("data-anim-type" , "pause-left"); break; } }, false); })();

解説

上記のソースコードを全てファイルに書き込んでindex.htmlをブラウザ(PC専用)で表示すると、カーソルによってキャラクターの向きが変わり、カーソルを押している間、ウォークアニメーションをします。 anim.jsでは、カーソルイベントをコントロールして、cssに、アニメーションパターンを作成しています。 今回は、jsとcssを別ファイルで設置しましたが、svgデータの中に入れ込むことも可能です。 この辺は、複数キャラクターを表示した際に共通化したいポイントと、特化した機能をもう少し定義してから最適値を決めていこうと考えています。 とりあえず、ゲーム内で、座標を動かしてあげれば、キャラクターが歩くアニメを1ファイルで実現することができました。 意外と誰もやっていないこの方式、今後のブラウザメインの世の中になることを考えるとゲーム以外でも使えそうですね。 このジャンル盛り上がってくれないかな?

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。