Custom Text Styles v0.91

じ☆ve冰风

Custom_TextStyles.js v0.91

---

Some basic font style customizing.





FEATURES
-----------------
* Font color
* Font outline color / thickness
* Font shadow
* Font bold /italic
* Message box left padding

HOW TO INSTALL
-----------------
* Copy the code in a text file "Custom_FontStyles.js" in /js/plugins
* Add it and turn it ON in your plugins database
* Set parameters as you like

Spoiler: SCRIPT

2. //=============================================================================
3. // Custom_FontStyles.js
4. //=============================================================================
5. /*:
6. * @target MZ
7. * @plugindesc You can now customize your text
8. * @author kopa
9. * @help
10. *
11. * @param Text Options
12. * @text _FONT OPTIONS
13. *
14. * @param fontColor
15. * @desc Color of the font in hex or rbg.
16. * @text Font Color
17. * @type string
18. * @default #ffffff
19. *
20. * @param outlineColor
21. * @desc Color of the outline in hex or rbg.
22. * @text Outline Color
23. * @type string
24. * @default rgba(0,0,0,1)
25. *
26. * @param outlineThickness
27. * @desc Thickness of the outline.
28. * @text Outline Thickness
29. * @type number
30. * @max 15
31. * @min 1
32. * @default 3
33. *
34. * @param fontItalic
35. * @text Italic
36. * @type boolean
37. * @on true
38. * @off false
39. * @desc
40. * @default false
41. *
42. * @param fontBold
43. * @text Bold
44. * @type boolean
45. * @on true
46. * @off false
47. * @desc
48. * @default false
49. *
50. * @param Shadow Options
51. * @text _SHADOW OPTIONS
52. *
53. * @param useShadow
54. * @text Use Shadow
55. * @type boolean
56. * @on true
57. * @off false
58. * @desc
59. * @default false
60. *
61. * @param shadowX
62. * @desc X position of the shadow relative to the text
63. * @text Shadow X Position
64. * @type number
65. * @default 3
66. *
67. * @param shadowY
68. * @desc Y position of the shadow relative to the text
69. * @text Shadow Y Position
70. * @type number
71. * @default 3
72. *
73. * @param shadowOpacity
74. * @desc Opacity of the Shadow (min:0, max:1)
75. * @text Shadow Opacity
76. * @type number
77. * @default 0.40
78. * @max 1
79. * @min 0
80. * @decimals 2
81. *
82. * @param menu
83. * @text _MENU OPTIONS
84. *
85. * @param textAlign
86. * @text Text Alignment
87. * @desc Alignment of the text in menus
88. * @type select
89. * @default center
90. * @option center
91. * @option left
92. * @option right
93. *
94. * @param dialog
95. * @text _DIALOG OPTIONS
96. *
97. * @param leftPadding
98. * @desc Message left padding
99. * @text Left Padding
100. * @type number
101. * @default 3
102. *
103. * @param leftPaddingFace
104. * @desc Message left padding when using faceset
105. * @text Left Padding Face
106. * @type number
107. * @default 20
108. *
109. *
110. * @help Custom_TextStyles.js
111. *
112. * This plugin draws text
113. *
114. *
115. *-----------------------------------------------------------------------------
116. * How to use this plugin
117. *-----------------------------------------------------------------------------
118. * Simply install to your plugins folder and turn it on in the Plugin Manager.
119. * This plugin should almost certainly go at the top of the list;
120. * we are changing how the base engine peforms a DrawText function.
121. *
122. *-----------------------------------------------------------------------------
123. * About the license of this plugin (License)
124. *-----------------------------------------------------------------------------
125. * This plugin is released under the MIT License.
126. *
127. *-----------------------------------------------------------------------------
128. * The released versions of this plugin (Change log)
129. *-----------------------------------------------------------------------------
130. *
131. *
132. */
133. var CTS = CTS || {}; CTS.params  = CTS.params || {};
134. (($_$) => {
135.     function getPluginParameters() {var a = document.currentScript || (function() { var b = document.getElementsByTagName('script'); return b[b.length - 1]; })(); return PluginManager.parameters(a.src.substring((a.src.lastIndexOf('/') + 1), a.src.indexOf('.js')));}
136.     // Store/Set the parameters
137.     $_$.par = getPluginParameters();
139.     // Just set default in case none was specified in via plugin manager
140.     $_$.par['Parameter Name'] = $_$.par['Parameter Name'] || 0;
141.     console.log($_$.par['Parameter Name'])
142. })(CTS.params);
145. const leftpadding = parseFloat(CTS.params.par['leftPadding']);
146. const leftpaddingface = parseFloat(CTS.params.par['leftPaddingFace']);
147. const shadowposx = parseFloat(CTS.params.par['shadowX']);
148. const shadowposy = parseFloat(CTS.params.par['shadowY']);
149. const shadowopa = parseFloat(CTS.params.par['shadowOpacity']);
150. const shadowoutlineopa = shadowopa - 0.1;
152. Window_Base.prototype.drawText = function(text, x, y, maxWidth, align) {
153.     this.contents.drawText(text, x, y, maxWidth, this.lineHeight(), CTS.params.par['textAlign']);
154. };
155. Window_Base.prototype.changeTextColor = function(color) {
156.     this.contents.textColor = CTS.params.par['fontColor'];
157. };
158. Window_Base.prototype.changeOutlineColor = function(color) {
159.     this.contents.outlineColor = CTS.params.par['outlineColor'];
160. };
162. Window_Message.prototype.newLineX = function(textState) {
163.     const faceExists = $gameMessage.faceName() !== "";
164.     const faceWidth = ImageManager.faceWidth;
165.     const spacing = leftpaddingface;
166.     const margin = faceExists ? faceWidth + spacing : leftpadding;
167.     return textState.rtl ? this.innerWidth - margin : margin;
168. };
170. Bitmap.prototype.initialize = function(width, height) {
171.     this._canvas = null;
172.     this._context = null;
173.     this._baseTexture = null;
174.     this._image = null;
175.     this._url = "";
176.     this._paintOpacity = 255;
177.     this._smooth = true;
178.     this._loadListeners = [];
180.     // "none", "loading", "loaded", or "error"
181.     this._loadingState = "none";
183.     if (width > 0 && height > 0) {
184.         this._createCanvas(width, height);
185.     }
187.     /**
188.      * The face name of the font.
189.      *
190.      * @type string
191.      */
192.     this.fontFace = "sans-serif";
194.     /**
195.      * The size of the font in pixels.
196.      *
197.      * @type number
198.      */
199.     this.fontSize = 16;
201.     /**
202.      * Whether the font is bold.
203.      *
204.      * @type boolean
205.      */
206.     this.fontBold = CTS.params.par['fontBold'];
208.     /**
209.      * Whether the font is italic.
210.      *
211.      * @type boolean
212.      */
213.     this.fontItalic = CTS.params.par['fontItalic'];
215.     /**
216.      * The color of the text in CSS format.
217.      *
218.      * @type string
219.      */
220.     this.textColor = "#ffffff";
222.     /**
223.      * The color of the outline of the text in CSS format.
224.      *
225.      * @type string
226.      */
227.     this.outlineColor = "rgba(0, 0, 0, 0.5)";
229.     /**
230.      * The width of the outline of the text.
231.      *
232.      * @type number
233.      */
234.     this.outlineWidth = CTS.params.par['outlineThickness'];
235. };
236. Bitmap.prototype.drawText = function(text, x, y, maxWidth, lineHeight, align) {
237.   
238.     if (CTS.params.par['useShadow'] == "true") {
239.   
240.     // [Note] Different browser makes different rendering with
241.     //   textBaseline == 'top'. So we use 'alphabetic' here.
242.     const context = this.context;
243.     const alpha = context.globalAlpha;
244.     maxWidth = maxWidth || 0xffffffff;
245.     let tx = x;
246.     let ty = Math.round(y + lineHeight / 2 + this.fontSize * 0.35);
247.     if (align === "center") {
248.         tx += maxWidth / 2;
249.     }
250.     if (align === "right") {
251.         tx += maxWidth;
252.     }
253.     context.save();
254.     context.font = this._makeFontNameText();
255.     context.textAlign = align;
256.     context.textBaseline = "alphabetic";
257.     context.globalAlpha = 1;
258.     this._drawTextShadowOutline(text, tx + shadowposx, ty + shadowposy, maxWidth);
259.     this._drawTextOutline(text, tx, ty, maxWidth);
260.     context.globalAlpha = alpha;
261.     this._drawTextShadow(text, tx + shadowposx, ty + shadowposy, maxWidth);
262.     this._drawTextBody(text, tx, ty, maxWidth);
263.     context.restore();
264.     this._baseTexture.update();
265.     }
266.     else {
267.        // [Note] Different browser makes different rendering with
268.     //   textBaseline == 'top'. So we use 'alphabetic' here.
269.     const context = this.context;
270.     const alpha = context.globalAlpha;
271.     maxWidth = maxWidth || 0xffffffff;
272.     let tx = x;
273.     let ty = Math.round(y + lineHeight / 2 + this.fontSize * 0.35);
274.     if (align === "center") {
275.         tx += maxWidth / 2;
276.     }
277.     if (align === "right") {
278.         tx += maxWidth;
279.     }
280.     context.save();
281.     context.font = this._makeFontNameText();
282.     context.textAlign = align;
283.     context.textBaseline = "alphabetic";
284.     context.globalAlpha = 1;
285.     this._drawTextOutline(text, tx, ty, maxWidth);
286.     context.globalAlpha = alpha;
287.     this._drawTextBody(text, tx, ty, maxWidth);
288.     context.restore();
289.     this._baseTexture.update();  
290.     }
291. };
292. Bitmap.prototype._drawTextShadow = function(text, tx, ty, maxWidth) {
293.     const context = this.context;
294.     context.fillStyle = "rgba(0, 0, 0, "+shadowopa+")";
295.     context.fillText(text, tx, ty, maxWidth);
296. };
297. Bitmap.prototype._drawTextShadowOutline = function(text, tx, ty, maxWidth) {
298.     const context = this.context;
299.     context.strokeStyle = "rgba(0, 0, 0, "+shadowoutlineopa+")";
300.     context.lineWidth = 3;
301.     context.lineJoin = "round";
302.     context.strokeText(text, tx, ty, maxWidth);
303. };

复制代码

Let me know if theres any bugs.

No credits needed.


本贴来自国际rpgmaker官方论坛作者:kopa处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/custom-text-styles-v0-91.142923/