Bagaimana cara mengoptimalkan aplikasi web HTML5 Canvas dan JavaScript untuk Mobile Safari?
17
Saya telah membuat game HTML5 Canvas dan JS yang berjalan sangat baik di desktop atau laptop di Chrome (30fps), tetapi pada Safari seluler saya hanya mendapatkan sekitar 8 fps. Apakah ada tips atau trik sederhana untuk meningkatkan framerate?
Sayangnya, jawabannya adalah menggambar lebih sedikit. Saya telah menemukan hambatan dengan aplikasi berbasis kanvas (pada platform apa pun, sebenarnya) adalah waktu yang diperlukan untuk benar-benar menggambar piksel.
Berikut ini beberapa hal untuk dicoba:
Gunakan beberapa lapisan kanvas. Gambar latar belakang Anda ke satu lapisan sambil menggambar objek Anda ke lapisan lain (benar-benar diposisikan di atas lapisan latar belakang). (Catatan: Saya belum mencoba ini di safari seluler, tetapi ini bisa membantu di platform lain)
Hanya menggambar ulang sprite yang telah berubah. Ini rumit tetapi pasti meningkatkan kinerja. Idenya adalah untuk menyimpan apakah perlu atau tidak sprite perlu digambar ulang dan menggambar ulang hanya sprite yang membutuhkannya bersama dengan latar belakang di belakang mereka. (Ini juga perlu mengalir ke objek lain yang sprite mungkin tumpang tindih.)
Hal yang berkembang di Chrome adalah bahwa a) mesin JavaScript-nya (V8) sangat cepat dan b) versi-versi terbaru (7,8,9) semuanya memiliki akselerasi GPU dalam hal rendering kanvas. Itu ditambah dengan fakta bahwa perangkat keras seluler tidak sekuat desktop / laptop Anda berarti akan sangat sulit untuk mendapatkan kinerja yang hampir sama pada safari seluler.
Saya pikir, untuk saat ini, pendekatan terbaik mungkin untuk menargetkan game Anda di safari seluler sejak awal dan mencoba membangun game yang tidak terlalu intensif.
+1 Menggambar lebih sedikit jelas dan sayangnya cara untuk pergi di sini, meskipun dengan kanvas kedua untuk lapisan latar belakang dan pendekatan yang ditandai kotor Anda dapat memperoleh kinerja hingga 50% lebih dalam beberapa kasus.
Ivo Wetzel
4
Ini agak sulit, tetapi bisakah game Anda beroperasi pada sprite DIV dengan transformasi CSS? Saya mengatakan ini karena saya mendapatkan beberapa kinerja luar biasa dengan memindahkan barang-barang di perangkat iOS dengan transformasi dan transisi CSS.
Ini tampaknya perangkat keras yang dipercepat, dengan peringatan aneh bahwa Anda harus menggunakan formulir 3D untuk transformasi (yaitu translate3D, daripada menerjemahkan) untuk akselerasi untuk memulai. Ini benar-benar sangat halus, dan implementasi browser iOS mendukung bentuk di mana Anda hanya menetapkan matriks elemen 16 langsung, yang sangat nyaman bagi saya.
Saya sangat terkesan dengan betapa halusnya akhirnya, sehingga saya bermaksud mencoba proyek permainan sederhana yang ditulis dengan cara ini.
Saya benci menambahkan jawaban ke utas lama - tapi saya terkejut tidak ada yang menyebutkan ini.
Saat Anda menulis gim pertama Anda, cukup tuliskan bagaimana Anda mengharapkan gim tersebut bekerja dengan baik. Teknik di atas adalah titik awal yang baik untuk menjaga kinerja tetap tinggi - tetapi trik sebenarnya adalah profiler. Jika Anda membuat profil aplikasi di Chrome atau Firefox (petunjuk: gunakan banyak metode agar Anda dapat melihat kemacetan yang tepat; jadi Anda tidak harus memindahkan barang nanti - Anda tetap harus melakukan ini.), Anda mendapatkan manfaat tambahan dengan melihat hasil waktu yang tepat. Dalam kasus saya, saya melihat terus-menerus menggambar ulang latar belakang mengambil 80% dari waktu browser. Setelah saya memindahkannya, saya melihat panggilan lain mengambil masing-masing 40% dan lebih banyak. Setelah satu atau dua jam, saya melihat keuntungan FPS yang cukup besar.
Saya juga ingin mendengar dari hasil Anda. Saya sudah mencoba melakukan hal yang sama. Saya menemukan bahwa melakukan banyak matematika itu baik-baik saja tetapi segera setelah Anda meletakkan kanvas di sana yang jatuh mental dan frame rate jatuh.
Saya memiliki hamparan latar depan yang menampilkan efek. Itu adalah gambar berkualitas sangat tinggi tetapi hal-hal alpha memperlambatnya sehingga saya menjatuhkannya sepenuhnya dengan imbalan lebih banyak frame per detik.
Hal lain yang saya lakukan adalah menggunakan PHP untuk mengerjakan beberapa matematika yang berat. Saya memiliki kumpulan data yang besar tetapi alih-alih meminta JavaScript untuk menghitung dan menampilkan data, saya memutuskan untuk membiarkan PHP melakukan pekerjaannya dan membiarkan JavaScript menampilkan hasil. Ini tidak menghemat banyak waktu karena JavaScript "sehr gut" dengan matematika.
Saya anggap seluruh situs Anda menggunakan HTML5 jadi coba mainkan dengan pekerja latar belakang.
Semoga saya membantu dan tolong bagikan hasil Anda.
Ini agak sulit, tetapi bisakah game Anda beroperasi pada sprite DIV dengan transformasi CSS? Saya mengatakan ini karena saya mendapatkan beberapa kinerja luar biasa dengan memindahkan barang-barang di perangkat iOS dengan transformasi dan transisi CSS.
Ini tampaknya perangkat keras yang dipercepat, dengan peringatan aneh bahwa Anda harus menggunakan formulir 3D untuk transformasi (yaitu translate3D, daripada menerjemahkan) untuk akselerasi untuk memulai. Ini benar-benar sangat halus, dan implementasi browser iOS mendukung bentuk di mana Anda hanya menetapkan matriks elemen 16 langsung, yang sangat nyaman bagi saya.
Saya sangat terkesan dengan betapa halusnya akhirnya, sehingga saya bermaksud mencoba proyek permainan sederhana yang ditulis dengan cara ini.
sumber
Dalam hal menggambar garis, gabungkan sebanyak mungkin perintah lineTo sebelum memanggil stroke.
Ini dan beberapa kiat lainnya: http://dt.deviantart.com/blog/38471599/
sumber
semuanya @Gosub mengatakan plus:
lihat matematika apa pun yang Anda lakukan, lihat apakah ada cara lain untuk menggunakan algoritma yang lebih efisien.
gunakan gambar yang lebih kecil. coba buat dimensi kekuatan gambar 2
lihat apakah Anda dapat menghilangkan alpha blending di kanvas atau tidak menggunakan properti opacity CSS.
silakan kirim kembali hasil Anda. akan menarik untuk mengetahui hal-hal apa yang paling membantu.
sumber
Saya benci menambahkan jawaban ke utas lama - tapi saya terkejut tidak ada yang menyebutkan ini.
Saat Anda menulis gim pertama Anda, cukup tuliskan bagaimana Anda mengharapkan gim tersebut bekerja dengan baik. Teknik di atas adalah titik awal yang baik untuk menjaga kinerja tetap tinggi - tetapi trik sebenarnya adalah profiler. Jika Anda membuat profil aplikasi di Chrome atau Firefox (petunjuk: gunakan banyak metode agar Anda dapat melihat kemacetan yang tepat; jadi Anda tidak harus memindahkan barang nanti - Anda tetap harus melakukan ini.), Anda mendapatkan manfaat tambahan dengan melihat hasil waktu yang tepat. Dalam kasus saya, saya melihat terus-menerus menggambar ulang latar belakang mengambil 80% dari waktu browser. Setelah saya memindahkannya, saya melihat panggilan lain mengambil masing-masing 40% dan lebih banyak. Setelah satu atau dua jam, saya melihat keuntungan FPS yang cukup besar.
sumber
Saya juga ingin mendengar dari hasil Anda. Saya sudah mencoba melakukan hal yang sama. Saya menemukan bahwa melakukan banyak matematika itu baik-baik saja tetapi segera setelah Anda meletakkan kanvas di sana yang jatuh mental dan frame rate jatuh.
Saya memiliki hamparan latar depan yang menampilkan efek. Itu adalah gambar berkualitas sangat tinggi tetapi hal-hal alpha memperlambatnya sehingga saya menjatuhkannya sepenuhnya dengan imbalan lebih banyak frame per detik.
Hal lain yang saya lakukan adalah menggunakan PHP untuk mengerjakan beberapa matematika yang berat. Saya memiliki kumpulan data yang besar tetapi alih-alih meminta JavaScript untuk menghitung dan menampilkan data, saya memutuskan untuk membiarkan PHP melakukan pekerjaannya dan membiarkan JavaScript menampilkan hasil. Ini tidak menghemat banyak waktu karena JavaScript "sehr gut" dengan matematika.
Saya anggap seluruh situs Anda menggunakan HTML5 jadi coba mainkan dengan pekerja latar belakang.
Semoga saya membantu dan tolong bagikan hasil Anda.
sumber