- Registriert
- 08.06.08
- Beiträge
- 202
Ich lasse mir animierte sprites ausgeben.
Leider geht der Browser manchmal von der Mitte aus für die X und Y Achse der von der Mitte und nicht von oben links.
Bei "var themovement= "jump_left"" ist dies der Fall. Wenn man das jetzt auf z.B: "var themovement= "walk_right"" ändert funktionert es wieder wie es soll (von oben links).
Damit es jetzt funktioniert muss ich für Y und X negative Werte nehmen, was bei aber dazu führt, dass die Grafiken in der falschen Reihenfolge abgespielt werden.
Das Bild dazu ist im Anhang.
Das ganze gibt es auch direkt online:
http://benediktvogler.de/sonstiges/ClonkS/dev/animateCLonk.html
Leider geht der Browser manchmal von der Mitte aus für die X und Y Achse der von der Mitte und nicht von oben links.
Bei "var themovement= "jump_left"" ist dies der Fall. Wenn man das jetzt auf z.B: "var themovement= "walk_right"" ändert funktionert es wieder wie es soll (von oben links).
Damit es jetzt funktioniert muss ich für Y und X negative Werte nehmen, was bei aber dazu führt, dass die Grafiken in der falschen Reihenfolge abgespielt werden.
Code:
<title>Dokumenttitel</title>
<style type="text/css">
#Clonk {
width:15;
height:20px;
background-image: url(43Full.png);
background-repeat:none;
background-position: 0 0;
}
</style>
<script type="text/javascript">
var x = 0;
var y=0;
var themovement= "jump_left"
var themoveinterval = window.setInterval("move_clonk(themovement)", 80);
function move_clonk(movement){
if (movement=="walk_right"){
y=342
x=x+16
update_bg_position_clonk()
}else if (movement=="walk_left"){
y=0
x=x+16
update_bg_position_clonk()
}else if (movement=="jump_left"){
y=-140
x=x+16
if (x==128) {
window.clearInterval(themoveinterval)
}
update_bg_position_clonk()
}
}
function update_bg_position_clonk(){
document.getElementById("Clonk").style.backgroundPosition = x +" " + y
}
</script>
</head>
<body>
<div id="Clonk"></div>
</body>
</html>
Das Bild dazu ist im Anhang.
Das ganze gibt es auch direkt online:
http://benediktvogler.de/sonstiges/ClonkS/dev/animateCLonk.html