• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Wir haben den Frühjahrsputz beendet, Ihr auch? Welches Foto zu dem Thema hat Euch dann am Besten gefallen? Hier geht es lang zur Abstimmung --> Klick

[CSS/Javascript]Background position, sprites und die Mitte

Bomberzocker

Bomberzocker

Auralia
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.

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
 

Anhänge

  • 43Full.jpg
    43Full.jpg
    68,1 KB · Aufrufe: 182
hillepille

hillepille

Melrose
Registriert
19.07.09
Beiträge
2.508
hi, irgendwie habe ich dein prob nicht so ganz verstanden und das bild ist so klein, dass ich da nicht wirklich was drauf erkenne. aber wenns darum geht die bilder ab einem punkt wieder rückwärts zu spielen, dann ginge es z.b. so:

<script type="text/javascript">
var x = 0;
var y = 0;
var z = 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= (z != 1) ? x+16 : x-16;
if (x>128) {
z=1;
}else if(x == 0){
z = 0;
}
update_bg_position_clonk()
}
}

function update_bg_position_clonk(){
//alert(x+" "+y);
document.getElementById("Clonk").style.backgroundPosition = x +" " + y
}
</script>
 
Bomberzocker

Bomberzocker

Auralia
Registriert
08.06.08
Beiträge
202
naja Rückwärst soll es genau nicht. Das passiert leider leicht wenn ich mit negativen Werten arbeiten muss. Mein Problem ist dass die Y=0 und X=0 bei "var themovement= "jump_left"" irgendwie die Mitte ist und nicht die Ecke oben links. Und wen ich jetzt eine Reihe in der oberen ecke links haben möchte, habe ich statt z.B: X=0 Y=50 das: X=-34 Y=-55
 
Bomberzocker

Bomberzocker

Auralia
Registriert
08.06.08
Beiträge
202
bin jetzt nen Schritt weiter. Die X Variable wird ja nicht bei jedem funktionswechsel resetet (=0) sondern bleibt die alte.
Gibt es eine vorgefertigte Möglichkeit eine Variable auf ne Änderung zu überprüfen? Hab mir jetzt was selber gebastelt
 
Zuletzt bearbeitet:
Bomberzocker

Bomberzocker

Auralia
Registriert
08.06.08
Beiträge
202
hier nochmal meien neuste Version des Code.

Code: 
<script type="text/javascript">
	var x = 0;
	var y= 0;
	var themovement= "walk_left";
	last=themovement
	var themoveinterval = window.setInterval("move_clonk(themovement)", 80);
	function move_clonk(movement){
		if (themovement!=last){
			x=0
			y=0
			last=themovement
		}else{
			last=themovement
		}
		
		if (movement=="walk_right"){
			y=342;
			x=x+16;
		}else if (movement=="walk_left"){
			y=0;
			x=x+16;
		}else if (movement=="jump_left"){
			y=142;
			x=x+16;
		}else if (movement=="climb_left"){
			y=-20
			x=x+16
		}
		update_bg_position_clonk();
	}
	
	function update_bg_position_clonk(){
		document.getElementById("Clonk").style.backgroundPosition = x +"px " + y +"px"
	}
	</script>
leicht zu erkennen ist, dass ich bei movement=="walk_right" mit positiven werten arbeiten kann um nach unten zu gehen und bei (movement=="climb_left" negative werte brauche um den Bildausschnitt nach unten zu bewegen. Beides ist genau gleich geschrieben und der Hammer dabei ist, dass movement=="jump_left" von der mitte des Bildes ausgeht und nicht oben links.
Jetzt habe ich drei gleichzeitige Versionen der Interpretation des Codes von FF und Safari!
Irgendwas muss doch am Code dann falsch sein.
Die einzige Fehlerquelle, die ich entdecken konnte waren die gleichbleibenden Variablenwerte. Aber das ist ja jetzt auch schon Geschichte.
 
Bomberzocker

Bomberzocker

Auralia
Registriert
08.06.08
Beiträge
202
ich glaub das Problem ist nun weg.
Lösung war ganz einfach: Will man den "Bildausschitt" nach unten bewegen muss y negativ sein. Nach rechts geht es mit positiven Zahlen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten