Speed Up Your Games Using : Unity “Sprite Packer”, Super Easy!

Game optimization can make your games more stable, robust, reduce the game size, improve frames per second (speed up), and also to reduce the hardware minimum requirement (get more audience). Anyway the ultimate goal of the game optimization is to makes users smile in front of your game screen.

อันเนื่องมาจากขี้เกียจ เขียนปนกันไปเลยนะ

สำหรับใครที่เจอปัญหาเกมหนัก เกมกระตุก ลองใช้ Sprite Packer กันดูครับ เป็น build-in tool ที่มากับ Unity5 เลย ใช้งานง่าย เห็นผลเร็ว มี อ.ย. อีกตะหาก

อ่ะมาลองเล่นดู

/********************/

If you are an Unity3D (Unity 5) developer, you have lots of optimization techniques that can be able to apply to your games. It can be a rendering optimization [1], scripting optimization [2], memory optimization [3] and more[4]. In this article I’ll show you the super easy technique but powerful for game optimization which is using the Sprite Packer.[5]

As you know that, almost of the games need sprites. It’s used for the game characters, level environment, and also the game GUI for example.

A sprite is image data that you load into your game for drawing on the game screen(with another images)[6].

Unfortunately, more images (textures) need more times to load/unload into the memory, more times to drawing to the screen buffer in one frame. (for good performance, you need more than 30 fps or more than 60 fps will be great.)

One smart technique is to combine a set of images into one image which called “Atlas” and keep the meta data such as each sprite location, size, name, and etc.

คือไอ้การที่มีรูปเย๊อะ ๆ เนี่ย เวลาจะวาดรูปลงหน้าจอแต่ละ frame โปรแกรมเราต้องโหลดเข้าโหลดออกจาก RAM หลายต่อหลายครั้ง ทำให้วาดแต่ละ frame อาจใช้เวลานาน โบราณเขาเลยบอกว่าให้เอามารวมกันเป็นรูปเดียวซะนะ แล้วจงทำแผนที่ atlas ให้มันว่าแต่ละ sprite ของเราอยู่ตรงไหน ขนาดเท่าไรกันบ้าง จะตั้งชื่อ sprite ให้สวยงามก็ตามแต่สบายใจเลย

ทีนี้เวลาโหลดเข้าโหลดออกจำนวนภาพก็ลดลงเย๊อะแระ สบายตัว, 1วิ นี่วาดได้หลาย frame เลย ดูแล้วสบายตา ลื่นไหล ปรื้ดปร้าด… (รูปข้างล่างจากต้องโหลด 14 ครั้งเหลือแค่ 1 ครั้ง)

Using Atlas helps to reduce the times to load/unload images into the memory. (figure above~, shows reducing from 14 times load/unload images to only 1 time, depends on your games)

/********************/

Okay, it’s miracle time… the main point of this article is… you DON’T NEED to make the Atlas by yourself anymore! Forget the dragging and dropping images and align them in the Photoshop away. If you are Unity fanboys, you just select the image you want and specific the “Packing Tag” in the [inspector] window and that’s it! If you want more than one atlas, it easy as just specific another “Packing Tag” (i.e., Worldmap_atlas, MainMenu_atlas) for each group of images.

To make sure that your sprites really packed into the atlas (if you don’t trust that Unity do optimized for you). Click [Windows] > [Sprite Packer].

The Sprite Packer window will be shown, if there is no any atlas, just click “Pack” button at the top left of the window.

Now your group of sprites already packed as an atlas. You can see how many atlas you have and what each atlas looks like by checking the “View atlas:” menu. Then select one atlas you want and select one sprite (it’s in side the texture, click arrow(>) icon to expand it) which is showing in the atlas. Then you gonna see the OUTLINE show that the selected sprite now has packed into the atlas.

อ่ะ ทีนี้อยากจะ pack ไอ้เจ้าเหล่า sprites ของเราเข้าด้วยกันเป็น atlas แระ

ก็แค่เลือก sprite นั้นๆ แล้วเหลือบไปดูที่ หน้าต่าง inspector จะเห็น “Packing Tag” นั่นแหละ ใส่ชื่อ Tag ของกลุ่ม sprite ของเราเลย จ.บ.

อยากได้หลาย atlas ก็ตั้ง Tag คนละชื่อ อย่าจัดกลุ่มมั่วล่ะ อันไหนใช้ด้วยกันบ่อยก็ pack ไว้ด้วยกัน อันไหนใช้คนละ scene เลย ไม่เกี่ยวกันก็แยก atlas กัน (Tag คนละ กลุ่มกัน)ได้ไม่ต้องโหลดเข้าโหลดออกบ่อย ไม่ใช่เอาทุกอย่างมารวมเป็น atlas เดียวนะ นอกจากเกมเล็กมากๆ Get นะ

ลองเช็คว่า Sprite เราอยู่ใน atlas แล้วจริงป่าว ก็เปิดหน้าต่าง Sprite Packerถ้ายังไม่มีสักอันก็กด Pack เดี๋ยวก็มา ทีนี้เลือกชื่อ atlas ที่เราตั้งไว้จะเห็นว่ารูปที่เราตั้ง Tagเดียวกันไว้มันมารวมกันแระ ลองคลิก sprite ที่ หน้าต่าง project ดูจะเห็นว่ามันมี outline แสดงให้เห็นใน atlas เราด้วย มันใจได้ว่าเวลาเล่นจริงมันจะดึงมาจาก atlasไรงี้

/********************/

In conclusion, you don’t worry about how to make the atlas or about defining the area of the atlas in order to optimize the draw call. Also don’t need to pre-create the atlas before using it.

/********************/

The super easy workflow working with sprites in Unity is just import image files to Unity, set each of them as Sprite, drag them to the Scene window, decorate them more beautiful as much as you can (no need to pack the atlas at this moment).

When you want to do optimization, select the sprite (or a set of sprites) in the project window, specific the “Packing Tag” of that sprite. That’s it.

At the “Sprite Packer” window, you can click “Pack” button to pack at this time or let Unity do packing automatically when it is changing to PLAY mode or when it is BUILDING the project.

Double check if the “Sprite Packer” is enabled, Click [Edit] > [Project Settings] > [Editor] > Inspector Editor Settings > Sprite Packer > Mode > Always Enabled.

Enjoy! Enjoy! Enjoy!

More details, checkout the Unity Sprite Packer manual [7].

Checkout my friend’s funny game development articles at https://medium.com/@wisarutkiatboonsri

ส่วนใหญ่ที่เข้ามาอ่านคือคนเก่งอยู่แล้ว ไม่ต้องอธิบายยืดยาว เน๊อะ

สรุป ลากรูปเข้ามาใน Unity, ทำเป็น Sprite ซะ, แล้วก็เอาไปใช้ใน scene ได้เลย เมื่อไหรอยาก pack เป็น atlas มาตั้ง Sprite Tag ทีหลังได้ (packเลยก็ได้)ไม่ต้องไปเตรียมทำ atlas ไว้ก่อน ไม่ว่าจะใช้ Photoshop หรือ pack ใน unity ก็เหอะ คือ สบายมาก สบายเกิ๊น จะเปลี่ยนทีหลังก็ได้ ไม่เลื่อน ไม่เพี้ยน ไม่หลอน

ถ้าให้ชัวร์ก็เช็คว่า Sprite Packer เขา Enable อยู่ป่าว ดูตามรูปนะ

อ่านบทความมันๆ ของ Wisarut ได้ที่ https://medium.com/@wisarutkiatboonsri