日誌2020-08-23 23:43

SRPGStudio - FP.EP改圖片腳本 & 教學

• 優點：
  　1.能夠在任何地方使用自己定義的圖片，並且破除規格大小限制
  　2.不僅能改介面UI，包括HP血條、數字等也能替換掉
• 缺點：
  　畫面放太多自定義圖片，容易導致讀取緩慢、Lag等情形

• －教學素材－
  No1.png
  No2.png　　　　
  圖片語法腳本下載(壓縮檔內含上面兩張圖片)
  百度云 提取碼:g5np
  MEGA空間
• －語法腳本用法前須知重點，使用前請確實閱讀－

1. 以防改造失敗跳出Error毀壞，請保存原有腳本
   請先將據點腳本『scene-rest.js』複製一個出來
   遊戲根目錄\Script\scene\scene-rest.js
   並且改名後放到
   遊戲根目錄\Plugin\scene\scene-rest『據點相關腳本』.js
   來提醒自己這腳本是據點相關的改造。
   

   ---

2. 下載好的附件圖片腳本，也請放到
   遊戲根目錄\Plugin\PictureWindow\
   圖片No1.png、No2.png則是分別放到
   遊戲根目錄\Material\face\No1.png
   遊戲根目錄\Material\picture\No2.png
   這樣事前準備就完成了

3. ---

   開啟scene-rest『據點相關腳本』.js後
   Ctrl + F 尋找『var RestCommand』(行數:443)*因人而異
   下方的有三段分別是…
   LayoutControl.getRelativeX(8);指令欄的X軸
   LayoutControl.getRelativeY(12);指令欄的Y軸
   root.queryTextUI(‘restcommand_title’);套用UI格式
   
   從上面這張圖就能得知，這段JS語法就是與指令欄有關聯
   所以！只要把導入自定義圖片的語法放入這三段其中一個即可！

   ---

4. 自定義圖片腳本中第三註解(紅色範圍複製起來)
   
   三、在需要的地方新增以下語法，並且自己調整即可顯示。
   ——————————————————————————
   var xSrc, ySrc;
   var destWidth = GraphicsFormat.FACE_WIDTH;
   var destHeight = GraphicsFormat.FACE_HEIGHT;
   var srcWidth = destWidth;
   var srcHeight = destHeight;
   var pic1 = root.getMaterialManager().createImage(No1.Material, No1.GaugeImg);
   if (root.isLargeFaceUse() && pic.isLargeImage()) {
   srcWidth = root.getLargeFaceWidth();
   srcHeight = root.getLargeFaceHeight();
   }
   xSrc = srcWidth;
   ySrc = srcHeight;
   pic1.drawStretchParts(x, y, destWidth = 550, destHeight = 530, xSrc-96, ySrc-96, srcWidth = 550, srcHeight = 530);
   //x . y = 圖片座標自訂位置
   //destWidth.destHeight.srcWidth.srcHeight = 調整圖片倍率
   //如果沒特殊需求請將這四項設為與圖片同等寬*高，例如550*530 = Width=550.Height=530
   //xSrc.ySrc = 圖片顯示範圍，例如【xSrc-15、ySrc+15】則會X從0改為-15座標顯示、Y是+15座標顯示，超出圖片顯示尺寸外則會強制消除
   //因此如無必要，請勿亂修正

   ---

5. 在使用圖片語法前 ，請先熟知自己的圖片大小為多少
   以No1.No2來說分別是
   
   由於這也算是改UI的一部份，因此套用在UI格式裡面就好
   getCommandTextUI: function() {
   return root.queryTextUI(‘restcommand_title’);
   },
   新增插入的圖片語法為『藍色部分』唷！
   getCommandTextUI: function() {
   var xSrc, ySrc;
   var destWidth = GraphicsFormat.FACE_WIDTH;
   var destHeight = GraphicsFormat.FACE_HEIGHT;
   var srcWidth = destWidth;
   var srcHeight = destHeight;
   var pic1 = root.getMaterialManager().createImage(No1.Material, No1.GaugeImg);
   // .Material, .GaugeImg 前方請輸入【定義名稱】
   if (root.isLargeFaceUse() && pic1.isLargeImage()) {
   //pic.isLargeImage() 請改為定義的 pic1
   srcWidth = root.getLargeFaceWidth();
   srcHeight = root.getLargeFaceHeight();
   }
   var pic2 = root.getMaterialManager().createImage(No2.Material, No2.GaugeImg);
   // .Material, .GaugeImg 前方請輸入【定義名稱】
   if (root.isLargeFaceUse() && pic2.isLargeImage()) {
   //pic.isLargeImage() 請改為定義的 pic2
   srcWidth = root.getLargeFaceWidth();
   srcHeight = root.getLargeFaceHeight();
   }
   xSrc = srcWidth;
   ySrc = srcHeight;
   pic1.drawStretchParts(260, 160, destWidth = 300, destHeight = 400, xSrc-96, ySrc-96, srcWidth = 300, srcHeight=400);
   //顯示半身繪
   
   pic2.drawStretchParts(410, 30, destWidth = 234, destHeight = 179, xSrc-96, ySrc-96, srcWidth = 234, srcHeight=179);
   //顯示對話框
   return root.queryTextUI(‘restcommand_title’);
   },
   這樣就完成 導入自定義圖片 教學了
   一起來看看效果是如何吧？

導入自定義圖片 － 效果圖