Bad performance in Titanium Mobile
Just started to play around with Appcelerator platform. My goal is to create a Android game using this platform.
To see how it is performing I did set up a simple task:
-Generate a map consisting of 1000 png images
Surprisingly this task takes like forever (~45 sec) on my Samsung Galaxy S
I compared doing exactly the same task in a webview. Jquery gets the job done in 800msec!
Am I doing something wrong, or should the platform not be used for applications with rich graphics?
Looks like the best option is to stick to the webview/jquery approach. (Some would say running Titanium in Phonegap-mode!)
Source, Titanium.UI.ImageView:
var win = Titanium.UI.currentWindow;
win.orientationModes = [
Titanium.UI.LANDSCAPE_LEFT
];
win.addEventListener("open", function(e) {
var startTime = new Date().getTime();
Ti.API.debug("Generating tiles using Titanium.UI.ImageView...");
var rows = [];
for (i = 0; i < 20; i++) {
var row = [];
for (j = 0; j < 50; j++) {
row.push(randomTile());
}
rows.push(row);
}
for (y = 0; y < rows.length; y++) {
for (x = 0; x < rows[y].length; x++) {
var img = Ti.UI.createImageView();
img.image = "images/" + rows[y][x];
img.top = y * 32;
img.left = x * 32;
win.add(img);
}
}
var endTime = new Date().getTime();
Ti.API.debug(endTime - startTime);
});
function randomTile() {
var rnd = Math.random() * 3;
if (rnd <= 1)
return "tile-grass-01.png";
if (rnd <= 2)
return "tile-sand-01.png";
if (rnd <= 3)
return "tile-water-01.png";
}
Source, webview/jquery:
$(function() {
var startTime = new Date().getTime();
Ti.API.debug("Generating tiles using jquery...");
var rows = [];
for (i = 0; i < 20; i++) {
var row = [];
for (j = 0; j < 50; j++) {
row.push(randomTile());
}
rows.push(row);
}
for (y = 0; y < rows.length; y++) {
for (x = 0; x < rows[y].length; x++) {
var img = $(document.createElement("img")).attr("src", "images/" + rows[y][x]);
img.css({ position: "absolute", top: y * 32, left: x * 32 });
$(document.body).append(img);
}
}
var endTime = new Date().getTime();
Ti.API.debug(endTime - startTime);
});
function randomTile() {
var rnd = Math.random() * 3;
if (rnd <= 1)
return "tile-grass-01.png";
if (rnd <= 2)
return "tile-sand-01.png";
if (rnd <= 3)
return "tile-water-01.png";
}
4 Answers
-
If you're running on the emulator only, thats you're problem, its dog slow.
-
It's apparently Android specific. I tried your code in an iOS app and it took 512 ms to generate the tiles.
-
Creating Views is expensive. You might want to load the images and set them on the view that needs to display them.
-
any luck with this? i am trying to do a simple animation which runs great on iPhone - but runs at about 2fps on android. i only have about 30 layers. i tried the openGL plugin but i haven't been able to get it to load to see if it performs any better.