Я относительно новичок в HTML5 и в Android, поэтому любые советы полезны. Я пытаюсь написать простую игру на HTML5, ориентированную в основном на мобильные устройства. Я использую спрайт-листы для графики, а трансляция «3d» веб-наборов трансформируется в аппаратное ускорение на устройствах iOS. Пока он работает довольно хорошо, работает на iOS-устройствах, а также в Safari, Firefox и Chrome. Моя проблема с браузером на устройствах Android (тестирование с Android 2.3.3 на HTC Desire) - я ожидаю, что он будет вести себя как Chrome, но, очевидно, я ошибаюсь. Похоже, что Android поддерживает webkit, но есть проблемы с 3d-переводом и CSS-анимацией (даже если они не используют 3D-переводы).
Следующее - моя попытка свести проблему к своей сути. testimage.png может быть любым, но для меня это сетка 3 * 3, показывающая числа, расположенные так:
012
345
678
Выходные данные для iOS, Chrome и Safari показывают части текстуры, соответствующие 0, 2 и 3 в вертикальной линии, с анимацией 2 вверх и вправо. В Android анимация «2» (и / или преобразованная в 3d «1», если вы раскомментируете код) отображает все изображение, а не подмножество, определяемое размером _spriteDiv, а во время анимации отображается «3» страдает той же проблемой.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Android Sprite Test</title>
<style>
@-webkit-keyframes testAnim { from { -webkit-transform:translate(32px, 96px) } to { -webkit-transform:translate(256px, 0px) } }
</style>
</head>
<body bgcolor = "#606060">
<script src="./scripts/test.js"></script>
</body>
</html>
JavaScript:
var MakeSprite = function() {
var me = {},
_width = 32,
_height = 32,
_spriteFrame = 1,
_spriteDiv = document.createElement('div'),
_spriteImg = document.createElement('img');
_spriteDiv.id = 'spriteDiv';
_spriteDiv.style.position = 'absolute';
_spriteDiv.style.overflow = 'hidden';
_spriteDiv.style.width = _width + 'px';
_spriteDiv.style.height = _height + 'px';
_spriteImg.id = 'spriteImg';
_spriteImg.src = './testimage.png';
_spriteImg.width = Math.floor(_width * 3);
_spriteImg.height = Math.floor(_height * 3);
_spriteImg.style.position = 'absolute';
_spriteDiv.appendChild(_spriteImg);
document.body.appendChild(_spriteDiv);
me.setFrame = function(n) {
_spriteFrame = n;
_spriteImg.style.left = (-_width * (_spriteFrame % 3)) + 'px';
_spriteImg.style.top = (-_height * Math.floor(_spriteFrame / 3)) + 'px';
};
// Works on iOS, Safari and Chrome - but not Android?
me.translate3d = function(x, y) {
_spriteDiv.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0px)';
}
// Works on Android, but presumably lacks the hardware acceleration of the 3D version
me.translate2d = function(x, y) {
_spriteDiv.style.webkitTransform = 'translate(' + x + 'px,' + y + 'px)';
}
me.testAnim = function() {
_spriteDiv.style.webkitAnimation = 'testAnim 5s';
}
return me;
};
/////////////////////////////////
// TEST SPRITES
// 2D translate works fine, but is suboptimal
var testSprite = new MakeSprite();
testSprite.translate2d(64, 32);
testSprite.setFrame(0);
// 3D translate doesn't work (it shows the whole image rather than clipping it),
// and it also breaks anything that comes after it
/*
var testSprite2 = new MakeSprite();
testSprite2.translate3d(64, 64);
testSprite2.setFrame(1);
*/
// CSS Animation breaks the sprite in the same way that 3D translation does
// (even though the animation works on a 2D translate), and similarly breaks
// sprites that come after it
var testSprite3 = new MakeSprite();
testSprite3.translate2d(64, 96);
testSprite3.setFrame(2);
testSprite3.testAnim();
// This will look wrong if any preceding sprites use translate3d or testAnim.
var testSprite4 = new MakeSprite();
testSprite4.translate2d(64, 128);
testSprite4.setFrame(3);
Кто-нибудь знает, как мне обойти эти проблемы, чтобы я мог использовать CSS-анимацию (и, в идеале, аппаратно-ускоренное преобразование веб-набора) в текущей версии браузера Android? Я слышал шумы о том, что в будущих версиях Android поддержка такого рода функций менее глючит, но, если честно, я действительно могу сделать что-то, что работает в текущих версиях.