본문 바로가기
Tips

RPG Maker MV에서 JPEG/JPG 이미지 사용하기 - RPG Maker MV

by biud436 2018. 5. 15.

PNG files are great to work with in the game, they have a small file size and support an alpha channel. 


JPG files have small file size rather than PNG files. But when using JPG files, they don't support an alpha channel, so you will see that we still have our black background from the image we are using.


To remove the background from an image, we need to load the alpha texture via the custom filter to a main image.


So we need to require two images. 


This is exactly what we want (alpha texture, image that filled a white color) : 


DLC


Let's add the filter that can use an alpha texture to main sprite and see how it looks.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    function getImgPath() {
      var path;
 
      if(Utils.isNwjs()) {
        path = StorageManager.localFileDirectoryPath();
        path = path.replace("save""img");
      } else {
        path = window.location.pathname.slice(0window.location.pathname.lastIndexOf("/")) + "/img/";
      }
 
      return path;
 
    };
 
    function testCretingAlphaTextureWithJPG(name) {
      // to use an ES6
      "use strict";
      var scene, alphaSprite, sprite, filter, path;
 
      scene = SceneManager._scene;
      path = getImgPath();
            
      sprite = PIXI.Sprite.fromImage(path + `pictures/${name}.jpg`);
 
      // to add child
      SceneManager._scene.addChild(sprite);
 
      // to create a JPG image.
      alphaSprite = PIXI.Sprite.fromImage(path + `pictures/${name}_alpha.jpg`);
      sprite.addChild(alphaSprite);
 
      // to add the filter
      filter = new PIXI.ETC1Filter(alphaSprite);
 
      // to set the filter
      sprite.filters = [filter];
    };
cs


This is exactly what we want : 


it passes vFilterCoord into our filter, then we know that we still have one problem that the destination coordinate is a little weird.


This guide requires the latest ETC1Filter plugin, which is available at https://github.com/biud436/MV/raw/master/RS_ETC1Filter.js, so make sure that this is installed first.