Spine相關

套用上spine發現有點透明的感覺，本來是以為有用了什麼濾鏡，後來想一想去檢查assetpack，才發現原來是assetpack的問題，要在資料夾上面加個 {nc} 讓它不要被壓縮到。

https://github.com/EsotericSoftware/spine-runtimes/blob/4.2/spine-ts/spine-pixi-v8/example/index.html

然後抓這個repo下來start，就可以看範例了，也可以自己新增。

Premiere

這裡是source monitor，按空白鍵可以開始播放，移動左右的藍方塊可以縮減範圍
（移動後要按I跟O它才會裁切）I = In , O = Out
這裡要按住Ctrl來移動影片出現的順序，不然會變成取代

要刪除中間的影片又想要影片沒有斷層，按住中間的影片 Alt + Backspace

也可以直接在Timeline上縮短單一clip的長度，要按住Ctrl才不會留下gap

給予寬度，算出圖片等比例高度

Here’s a simple JavaScript example to calculate the proportional height of an image when you set a fixed width:

function calculateProportionalHeight(originalWidth, originalHeight, newWidth) {
  const newHeight = (originalHeight * newWidth) / originalWidth;
  return newHeight;
}

// Example usage:
const originalWidth = 800;
const originalHeight = 600;
const newWidth = 400;

const newHeight = calculateProportionalHeight(originalWidth, originalHeight, newWidth);
console.log(`The proportional height for the new width is: ${newHeight}px`);

Explanation

  • The calculateProportionalHeight function takes the original width, original height, and the new width as arguments.
  • It calculates the new height using the formula we discussed and returns it.

In this example, if the original dimensions are 800×600, and you set a new width of 400, the function will calculate the new height that maintains the image’s aspect ratio.

https://chatgpt.com/share/6708fb61-3764-8001-b612-cc70253e169e

等比例縮放的圖

The goal is to make the sprite fit the width of the screen while keeping its proportions (aspect ratio) the same. To do this, we use the formula:

this.scale.x = this.app.screen.width / this.texture.width;

and

this.scale.y = this.scale.x;

What Does the Formula Mean?

Let’s break down the formula into simpler parts:

  1. this.app.screen.width: This is the width of your app’s screen (the space in which your sprite should fit).
  2. this.texture.width: This is the original width of your sprite’s image.

When you divide this.app.screen.width by this.texture.width, you are calculating how much bigger or smaller the sprite should be to fit the screen.

Mathematical Principle

The principle behind this is called proportional scaling. The idea is that if you want to change the size of an object while keeping its shape the same, you need to multiply both the width and height by the same number.

Example in Simple Terms

Imagine you have a picture that is 200 pixels wide and your screen is 800 pixels wide. To make the picture fit the screen:

  • You need to make the picture 4 times larger because 800 / 200 = 4.

That means the scale factor is 4, so you set:

this.scale.x = 4;
this.scale.y = 4;

This makes both the width and the height of the picture 4 times bigger, keeping its original shape.

Why Use this.scale.x and this.scale.y?

Using this.scale.x and this.scale.y ensures that your sprite grows or shrinks evenly in all directions, so it doesn’t look stretched or squished.

Here’s a step-by-step summary of what happens:

  1. Calculate the scale factor: this.app.screen.width / this.texture.width
  • This tells you how much to multiply the width by to make it fit.
  1. Apply the scale factor to both dimensions:
  • Set this.scale.x to this value so the width fits the screen.
  • Set this.scale.y to the same value to maintain the aspect ratio.

Real-Life Analogy

Think of a photo that you want to print in a larger size. If you want to make the photo twice as wide, you also need to make it twice as tall to keep it looking right. If you don’t do this, the picture might end up looking stretched or distorted.

I hope this breakdown helps you understand the math and logic behind scaling in PixiJS! If you have any more questions, feel free to ask! 😊