> For the complete documentation index, see [llms.txt](https://sithelloworld2021.gitbook.io/helloermine/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sithelloworld2021.gitbook.io/helloermine/game-development/object/object-type/sprite.md).

# Sprite

\#HelloGameDev #HelloErmine #HelloWorld2021

### **Sprite**

               เป็นการสร้าง object ที่ภาพมี animation โดยเราจะใช้คำสั่ง **`this.add.sprite(x,y,'key')`** แต่เมื่อเราต้องการให้ภาพ animation นั้นมีระบบฟิสิกส์ ให้เราใช้ **`this.physics.add.sprite(x,y,'key')`** ลงไปใน Create function

               **ตัวอย่าง**

```javascript
preload(){
     this.load.spritesheet('bird','src/image/bird.png',
        { frameWidth: 410 , frameHeight: 310}); 
}
create(){
     bird = this.add.sprite(425, 700, 'bird').setScale(0.5);
}
```

{% hint style="info" %}
คำสั่ง **`.setScale(ขนาด);`**  คือการกำหนดขนาดของ object โดยเลขที่ใส่จะเป็นตัวคูณว่า object จะใหญ่ขนาดไหน
{% endhint %}

               **ผลลัพธ์ที่ได้**

![ตัวอย่างของการสร้าง Sprite เท่านั้น ยังไม่ใช่การทำ Animation](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-Mef9Htdrs5HG_t5AC_j%2F-MefWhxqtX2iT-pwZN0I%2Fimage.png?alt=media\&token=1114cb83-8ed7-4522-88b4-40029e8a7d6c)

> **การหา frameWidth เเละ frameHeight** 
>
> * frameWidth
>   * ความยาวรูป/จำนวนเฟรม
> * frameHeight
>   * ความสูงของรูป

![ในตัวอย่างมี 8 เฟรม ความยาวรูปเท่ากับ 3280 คำนวณได้ว่า 3280 / 8 = 410 (frameWidth) ](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-Mef9Htdrs5HG_t5AC_j%2F-Mef_0106ukRcUHm2w0X%2Fbird.png?alt=media\&token=3e36ee2a-6731-471f-82ef-706d6f9a913e)