Pixi.js: poros mempengaruhi posisi objek

Saya berhasil melakukan ini dengan mengatur pivot dan posisi grafik ke tengahnya, dan kemudian saya menggambar grafik di sekitar titik ini.

Saya menjawab pertanyaan Anda tentang stackoverflow dengan contoh kode di sini: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

@GoodBoyDigital Apakah posisi mempengaruhi pivot, dan jika demikian, apakah itu perbaikan cepat?

Saya sebenarnya bingung tentang pivot dan anchor , bisakah ini digabungkan?

Nah, pivot dan anchor berbeda (secara konseptual). Pivot mempengaruhi titik rotasi, sedangkan jangkar adalah titik asal (titik posisi). Saya tidak yakin apakah pivot digunakan dengan benar.

Sepertinya ini bisa digunakan sebagai poin yang sama. Saya sebenarnya belum pernah melihat ini terpisah sebelumnya dalam rendering (css transform-origin, flash's Registration) apakah ada kasus penggunaan yang diperhitungkan? Jika demikian, dapatkah semuanya default ke satu hal, dan kemudian menggunakan yang lain jika disetel?

Mungkin default untuk jangkar di mana-mana termasuk rotasi, kecuali jika pivot adalah sebuah titik, gunakan itu untuk rotasi?

UPDATE : Atau sebaliknya dari yang di atas, meskipun saya condong ke _anchor = default_, dan _pivot = rotation_, penamaan yang lebih baik IMO.

anchor dan pivot cukup umum dalam mesin rendering. Ada banyak kasus penggunaan di mana Anda ingin memutar di sekitar tengah tetapi posisinya ditentukan oleh kiri atas. Itu adalah sesuatu yang tidak hanya harus kita dukung, tetapi juga kemauan.

Halo, sekarang sedang membahas masalah ini. Untuk sedikit penjelasan, anchor adalah hal khusus sprite. Ini digunakan untuk menyelaraskan tekstur. Saya menemukan fitur ini sangat berguna ketika saya membuat barang-barang dengan cocos2d pada masa itu jadi saya sangat ingin menambahkannya ke pixi. pivot milik semua objek tampilan dan pada dasarnya adalah titik rotasi.

Menutup ini setelah diselesaikan, poros / jangkar berfungsi sebagaimana mestinya.

Maaf karena telah mengungkit hal ini, tetapi saya telah mencari / membaca repo ini dan saya masih belum jelas tentang cara memutar DisplayObjectContainer dari tengah. Menggunakan pivot tidak memungkinkan wadah saya untuk membalik dari tengah tanpa berpindah ke tempat lain. Ada ide? Saya melihat # 93 dan berpikir itulah jawabannya, tetapi mungkin saya tidak memahaminya dengan benar. Bantuan apa pun akan dihargai. Terima kasih!

Sunting: Saya pikir akan sangat membantu untuk menyebutkan bahwa objek saya bergerak melintasi layar dan akan terbalik saat bergerak. Saya juga menggunakan skala untuk melakukan "membalik".

@ mparker11 Memutar titik dan membalik (melalui scale ) berbeda. pivot akan mempengaruhi nilai dalam rotation , saya tidak yakin apakah Anda dapat dengan benar mempengaruhi bagaimana wadah membalik dengan skala ...

Pikiran @GoodBoyDigital?

@englercj Terima kasih atas tanggapannya. Saya membaca artikel tentang menggunakan perkalian matriks untuk mencapainya, yang saya lihat bahwa @GoodBoyDigital digunakan dalam fungsi PIXI.DisplayObject.prototype.updateTransform , tetapi untuk kehidupan saya, saya tidak dapat benar-benar memahami cara mengubahnya untuk membuatnya berskala dari pusat, jika saya perlu mengubahnya.

Hmmm ... Pastinya tidak mengerti cara menggunakan pivot.

Saya mengatur posisi sprite pada posisi tertentu. Kemudian saya ingin membuatnya berputar di tengahnya, jadi saya mengatur porosnya di tengah sprite saya (sprite.width / 2, sprite.height / 2). Ini mengakibatkan sprite saya bergerak dan memiliki rotasi pada 0,0.

Uh? Apakah saya melewatkan sesuatu?

@tleunen Saya yakin Anda perlu menggunakan anchor karena Anda menggunakan Sprite.

Apakah perilaku ini akan diperbaiki di v4?

Saya memutuskan untuk mencoba Pixi dan segera menemukan "bug" ini.
Setelah beberapa jam googling saya masih tidak mengerti bagaimana ini seharusnya bekerja.
Kebanyakan orang di forum hanya mengatakan "perilaku poros rusak". Tidak terlalu membantu.

Begitu pula komentar Anda, saya takut. Ini adalah cara Pixi berurusan dengan pivot.
Jika 'bug' ini terlalu banyak untuk ditangani, harap berikan panduan atau jogging di ..

Pada hari Kamis, 10 Maret 2016, Ivan Kleshnin [email protected] menulis:

_Apakah perilaku ini akan diperbaiki di v4? _

Saya memutuskan untuk mencoba Pixi dan segera menemukan "bug" ini.
Setelah beberapa jam googling, saya masih tidak mengerti bagaimana seharusnya
kerja.
Kebanyakan orang di forum hanya mengatakan "perilaku poros rusak". Tidak terlalu
bermanfaat.

-
Balas email ini secara langsung atau lihat di GitHub
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811.

Mat Groves

_Mitra Teknis_

Telepon: 07708 114496 :: www.goodboydigital.com
Lantai Pertama, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
selamat tinggal ©. Seluruh hak cipta.

Begitu pula komentar Anda, saya takut

Harap jangan menganggap "Tidak terlalu membantu" secara pribadi.
Itu dimaksudkan untuk menggambarkan keadaan emosi saya, bukan untuk menyinggung perasaan.

Jika 'bug' ini terlalu banyak untuk ditangani, harap berikan panduan atau jogging di ..

Saya tidak tahu apakah itu bug atau bukan karena saya noob di industri ini.
Itulah mengapa saya meletakkan kata "bug" di atas dalam tanda kutip. Beberapa orang menganggapnya demikian. Beberapa - tidak.
Saya baru saja membagikan pengalaman saya dan bertanya tentang perubahan di v4. Saya benar-benar ingin belajar Pixi tetapi yang ini menjatuhkan saya.

Masalah utama: setelah membaca> 10 masalah terkait (di sini dan di internet) saya masih belum mengerti cara mengatasi perilaku ini dan memaksa wadah untuk berputar di sekitar pusatnya di titik ruang yang ditentukan.
Dan aku tidak sebodoh itu.

Halo yang disana!

Jangan khawatir bung, maaf jika saya agak pendek, Anda menangkap saya di penghujung hari yang panjang!

Pivot dimaksudkan untuk berperilaku sebagai titik jangkar yang tidak dinormalisasi.

Cara termudah untuk memperbaikinya adalah dengan menambahkan objek ke dalam wadah dan memutar wadah, sambil memindahkan objek secara internal.

Semoga membantu!

Tidak masalah. Thanx. Saya akan mencoba menggunakan saran Anda.

Menurut pendapat saya, cara termudah untuk memutar grafik (atau wadah) di sekitar titik tengahnya adalah dengan menyimpan koordinat titik pusat, tempat grafik digambar. Kemudian, atur posisi dan poros grafik ke titik tengah.
Berikut ini contohnya:

Jika Anda misalnya membuat objek grafik, Anda dapat mulai menggambar primitif di atasnya.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
Primitif selalu digambar relatif terhadap posisi objek Grafik (yang defaultnya 0).
Oleh karena itu, kita perlu mengatur posisi baru dari objek grafik menjadi 200, karena itu adalah titik tengah primitif kita saat ini.
test.position.x = 200; test.position.y = 200;
Sekarang kita dapat melihat, bahwa primitif baru saja bergeser, oleh karena itu kita perlu mengatur pivot ke koordinat yang sama dan itu akan tetap pada posisi yang sama, di mana kita telah menggambarnya.
test.pivot.x = 200; test.pivot.y = 200;

Properti pivot tidak bermasalah, hanya sedikit membingungkan untuk memahami cara kerjanya dan mengapa "memengaruhi posisi objek". Objek selalu berputar di sekitar posisinya sendiri dan pivot membantu kita menetapkan titik baru dari tempatnya berputar.

Hallo teman-teman! Bisakah saya menggunakan pivot dengan sudut? Saya mencoba mengubah sudut satu sprite (menggunakan poros untuk mengubah posisi rotasi) untuk mengikuti mouse, tetapi saya tidak bisa, dapatkah Anda membantu saya?

Periksa contoh codepen saya => http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
Dan kesalahan => http://screencast.com/t/hSSaaTO4j0

Terima kasih sebelumnya, Nicholls

Selesai! Hanya menggunakan pivot.y atau pivot.x hahaha! Terima kasih untuk semua tim Pixi! : +1:

Menurut pendapat saya, cara termudah untuk memutar grafik (atau wadah) di sekitar titik tengahnya adalah dengan menyimpan koordinat titik pusat, tempat grafik digambar. Kemudian, atur posisi dan poros grafik ke titik tengah.
Berikut ini contohnya:

Jika Anda misalnya membuat objek grafik, Anda dapat mulai menggambar primitif di atasnya.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
Primitif selalu digambar relatif terhadap posisi objek Grafik (yang defaultnya 0).
Oleh karena itu, kita perlu mengatur posisi baru dari objek grafik menjadi 200, karena itu adalah titik tengah primitif kita saat ini.
test.position.x = 200; test.position.y = 200;
Sekarang kita dapat melihat, bahwa primitif baru saja bergeser, oleh karena itu kita perlu mengatur pivot ke koordinat yang sama dan itu akan tetap pada posisi yang sama, di mana kita telah menggambarnya.
test.pivot.x = 200; test.pivot.y = 200;

Properti pivot tidak bermasalah, hanya sedikit membingungkan untuk memahami cara kerjanya dan mengapa "memengaruhi posisi objek". Objek selalu berputar di sekitar posisinya sendiri dan pivot membantu kita menetapkan titik baru dari tempatnya berputar.

Hei bung, saya pikir itu hack, karena ada efek sampingnya: posisinya telah diubah.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas baru-baru ini setelah ditutup. Silakan buka masalah baru untuk bug terkait.