Pixi.js: Pixi λ‘œλ”λ₯Ό ν™•μž₯ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?

에 λ§Œλ“  2019λ…„ 10μ›” 15일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: pixijs/pixi.js

Pixi λ‘œλ”λ₯Ό ν™•μž₯ν•˜κ±°λ‚˜ μ‚¬μš©μž μ •μ˜ λ‘œλ”λ₯Ό μž‘μ„±ν•˜λŠ” 방법이 μžˆμŠ΅λ‹ˆκΉŒ? SVGZ 지원을 μΆ”κ°€ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€. 기본적으둜 Pixiκ°€ μ²˜λ¦¬ν•˜κΈ° 전에 gzip으둜 λ‘œλ“œλœ μ½˜ν…μΈ λ₯Ό μ μ ˆν•œ SVG둜 μΆ•μ†Œν•΄μ•Ό 함을 μ˜λ―Έν•©λ‹ˆλ‹€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

PixiJS v5λŠ” λ‘œλ”μ— registerPlugin λ₯Ό λ„μž…ν–ˆμŠ΅λ‹ˆλ‹€.
http://pixijs.download/dev/docs/PIXI.Loader.html#.registerPlugin

이λ₯Ό 톡해 μ‚¬μš©μž 지정 λ―Έλ””μ–΄ μœ ν˜•μ„ μ²˜λ¦¬ν•˜λŠ” 자체 미듀웨어λ₯Ό λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€μŒμ€ 이λ₯Ό μˆ˜ν–‰ν•˜λŠ” 방법에 λŒ€ν•œ λŒ€λž΅μ μΈ μ˜ˆμž…λ‹ˆλ‹€.

const SVGZLoaderPlugin = {
  add() {
    // handle loading SVGZ files as an ArrayBuffer
    PIXI.LoaderResource.setExtensionXhrType(
      'svgz', LoaderResource.XHR_RESPONSE_TYPE.BUFFER);
    PIXI.LoaderResource.setExtensionLoadType(
      'svgz', LoaderResource.LOAD_TYPE.XHR);
  },
  use(resource, next) {
    // deflate SVGZ
    next();
  }
};
PIXI.Loader.registerPlugin(SVGZLoaderPlugin);

Loader μž‘λ™ 방식에 λŒ€ν•œ μžμ„Έν•œ λ‚΄μš©μ€ https://github.com/englercj/resource-loader λ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€.

ν–‰μš΄μ„ λΉ•λ‹ˆλ‹€!

λͺ¨λ“  3 λŒ“κΈ€

PixiJS v5λŠ” λ‘œλ”μ— registerPlugin λ₯Ό λ„μž…ν–ˆμŠ΅λ‹ˆλ‹€.
http://pixijs.download/dev/docs/PIXI.Loader.html#.registerPlugin

이λ₯Ό 톡해 μ‚¬μš©μž 지정 λ―Έλ””μ–΄ μœ ν˜•μ„ μ²˜λ¦¬ν•˜λŠ” 자체 미듀웨어λ₯Ό λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€μŒμ€ 이λ₯Ό μˆ˜ν–‰ν•˜λŠ” 방법에 λŒ€ν•œ λŒ€λž΅μ μΈ μ˜ˆμž…λ‹ˆλ‹€.

const SVGZLoaderPlugin = {
  add() {
    // handle loading SVGZ files as an ArrayBuffer
    PIXI.LoaderResource.setExtensionXhrType(
      'svgz', LoaderResource.XHR_RESPONSE_TYPE.BUFFER);
    PIXI.LoaderResource.setExtensionLoadType(
      'svgz', LoaderResource.LOAD_TYPE.XHR);
  },
  use(resource, next) {
    // deflate SVGZ
    next();
  }
};
PIXI.Loader.registerPlugin(SVGZLoaderPlugin);

Loader μž‘λ™ 방식에 λŒ€ν•œ μžμ„Έν•œ λ‚΄μš©μ€ https://github.com/englercj/resource-loader λ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€.

ν–‰μš΄μ„ λΉ•λ‹ˆλ‹€!

κ³ λ§ˆμ›Œ, λ§·! μ§€κΈˆκΉŒμ§€ v4μ—μ„œ v5둜 μ—…κ·Έλ ˆμ΄λ“œν•˜λ©΄ λ‘œλ”μ— λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€. "PIXI.loaders.Loader ν΄λž˜μŠ€κ°€ PIXI.Loader둜 μ΄λ™ν–ˆμŠ΅λ‹ˆλ‹€." μ‚¬μš© 쀑단 κ²½κ³ κ°€ ν‘œμ‹œλ˜κ³  λͺ¨λ“  이미지가 λ‘œλ“œλ  λ•ŒκΉŒμ§€ 화면에 검은색 μ‚¬κ°ν˜•μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

이전 Pixi λ‘œλ”λ₯Ό λ‹€μ‹œ μž‘μ„±ν•˜μ—¬ μƒˆ λ‘œλ”λ₯Ό μ‚¬μš©ν•˜λŠ” 방법에 λŒ€ν•œ μ „ν™˜ κ°€μ΄λ“œ λ˜λŠ” μ˜ˆκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

여기에 v5 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ κ°€μ΄λ“œκ°€ μžˆμŠ΅λ‹ˆλ‹€: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Loaderμ—λŠ” νŠΉλ³„ν•œ 것이 μ—†μŠ΅λ‹ˆλ‹€. ν•΄λ‹Ή μ‚¬μš© 쀑단 κ²½κ³ λŠ” λ„€μž„μŠ€νŽ˜μ΄μŠ€κ°€ λ³€κ²½λ˜μ—ˆμ§€λ§Œ μ—¬μ „νžˆ μž‘λ™ν•΄μ•Ό 함을 μ•Œλ €μ€λ‹ˆλ‹€. 더 λ―Έλ¬˜ν•œ 일이 μΌμ–΄λ‚˜κ³  μžˆλŠ” 경우, 검은색 μ§μ‚¬κ°ν˜•μœΌλ‘œ 보고 μžˆλŠ” 것에 λŒ€ν•œ 예λ₯Ό λ“€μ–΄ μƒˆλ‘œμš΄ 문제λ₯Ό μ œκΈ°ν•  수 μžˆλ‹€λ©΄ 더 μš°μ•„ν•œ κ²½ν—˜μ„ μ œκ³΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν”ŒλŸ¬κ·ΈμΈ 질문이 ν•΄κ²°λœ 것 κ°™μ•„μ„œ 이 문제λ₯Ό μ’…λ£Œν•˜κ² μŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰