[engine] 支持高 DPI 渲染

This commit is contained in:
SmallMain 2022-06-25 00:52:17 +08:00
parent 9447c862bf
commit bfbb3511eb
6 changed files with 96 additions and 13 deletions

View File

@ -587,6 +587,13 @@ let Label = cc.Class({
type: RenderComponent.EnableType,
default: RenderComponent.EnableType.GLOBAL,
},
enableRetina: {
type: RenderComponent.EnableType,
default: RenderComponent.EnableType.GLOBAL,
notify(oldValue) {
this.setVertsDirty();
}
},
},
statics: {

View File

@ -439,6 +439,26 @@ let RichText = cc.Class({
}
}
},
enableRetina: {
type: RenderComponent.EnableType,
default: RenderComponent.EnableType.GLOBAL,
notify: function (oldValue) {
if (this.enableRetina === oldValue) return;
for (let i = 0; i < this._labelSegments.length; i++) {
const labelComponent = this._labelSegments[i].getComponent(cc.Label);
if (labelComponent) {
labelComponent.enableRetina = this.enableRetina;
}
}
for (let i = 0; i < this._labelSegmentsCache.length; i++) {
const labelComponent = this._labelSegmentsCache[i].getComponent(cc.Label);
if (labelComponent) {
labelComponent.enableRetina = this.enableRetina;
}
}
}
},
},
statics: {
@ -1053,6 +1073,7 @@ let RichText = cc.Class({
labelComponent.autoSwitchMaterial = this.autoSwitchMaterial;
labelComponent.allowDynamicAtlas = this.allowDynamicAtlas;
labelComponent.enableRetina = this.enableRetina;
// 更新材质
if (this.customMaterial) {

View File

@ -75,6 +75,8 @@ let _isWrapText = false;
let _labelWidth = 0;
let _labelHeight = 0;
let _maxLineWidth = 0;
let _isRetina = false;
let _retinaScale = 1;
export default class BmfontAssembler extends Assembler2D {
updateRenderData (comp) {
@ -112,6 +114,12 @@ export default class BmfontAssembler extends Assembler2D {
this._updateContent();
this.updateWorldVerts(comp);
if (_isRetina) {
_contentSize.width /= _retinaScale;
_contentSize.height /= _retinaScale;
_fontSize /= _retinaScale;
}
_comp._actualFontSize = _fontSize;
_comp.node.setContentSize(_contentSize);
@ -139,8 +147,14 @@ export default class BmfontAssembler extends Assembler2D {
shareLabelInfo.margin = 0;
}
getTTFTextureSizeScale() {
return _isRetina ? _retinaScale : 1;
}
_updateProperties (comp) {
_string = comp.string.toString();
_isRetina = !(comp.font instanceof cc.BitmapFont) && (cc.sp.enableLabelRetina && comp.enableRetina === 0) || comp.enableRetina === 1;
_retinaScale = cc.sp.labelRetinaScale;
_fontSize = comp.fontSize;
_originFontSize = _fntConfig ? _fntConfig.fontSize : comp.fontSize;
_hAlign = comp.horizontalAlign;
@ -152,6 +166,15 @@ export default class BmfontAssembler extends Assembler2D {
_contentSize.width = comp.node.width;
_contentSize.height = comp.node.height;
if (_isRetina) {
_fontSize *= _retinaScale;
if (!_fntConfig) _originFontSize *= _retinaScale;
_contentSize.width *= _retinaScale;
_contentSize.height *= _retinaScale;
_lineHeight *= _retinaScale;
shareLabelInfo.margin *= _retinaScale;
}
// should wrap text
if (_overflow === Overflow.NONE) {
_isWrapText = false;
@ -708,4 +731,4 @@ export default class BmfontAssembler extends Assembler2D {
_quadsUpdated (comp) {}
_reserveQuads () {}
}
}

View File

@ -55,6 +55,8 @@ let _fontFamily = '';
let _overflow = Overflow.NONE;
let _isWrapText = false;
let _premultiply = false;
let _isRetina = false;
let _retinaScale = 1;
// outline
let _outlineComp = null;
@ -117,6 +119,11 @@ export default class TTFAssembler extends Assembler2D {
}
_aftUpdateRenderData(comp) {
if (_isRetina) {
_fontSize /= _retinaScale;
_nodeContentSize.width /= _retinaScale;
_nodeContentSize.height /= _retinaScale;
}
comp._actualFontSize = _fontSize;
comp.node.setContentSize(_nodeContentSize);
@ -129,6 +136,10 @@ export default class TTFAssembler extends Assembler2D {
_texture = null;
}
getTTFTextureSizeScale() {
return _isRetina ? _retinaScale : 1;
}
updateVerts () {
}
@ -138,6 +149,9 @@ export default class TTFAssembler extends Assembler2D {
_contentSizeExtend.width = _contentSizeExtend.height = 0;
if (_outlineComp) {
outlineWidth = _outlineComp.width;
if (_isRetina) {
outlineWidth *= _retinaScale;
}
top = bottom = left = right = outlineWidth;
_contentSizeExtend.width = _contentSizeExtend.height = outlineWidth * 2;
}
@ -166,15 +180,27 @@ export default class TTFAssembler extends Assembler2D {
_canvas = assemblerData.canvas;
_texture = comp._frame._original ? comp._frame._original._texture : comp._frame._texture;
_isRetina = (cc.sp.enableLabelRetina && comp.enableRetina === 0) || comp.enableRetina === 1;
_retinaScale = cc.sp.labelRetinaScale;
_string = comp.string.toString();
_fontSize = comp._fontSize;
_drawFontSize = _fontSize;
_underlineThickness = comp.underlineHeight || _drawFontSize / 8;
_overflow = comp.overflow;
_canvasSize.width = comp.node.width;
_canvasSize.height = comp.node.height;
_nodeContentSize = comp.node.getContentSize();
_lineHeight = comp._lineHeight;
_drawFontSize = _fontSize;
_underlineThickness = comp.underlineHeight || _drawFontSize / 8;
if (_isRetina) {
_fontSize *= _retinaScale;
_nodeContentSize.width *= _retinaScale;
_nodeContentSize.height *= _retinaScale;
_lineHeight *= _retinaScale;
if (comp.underlineHeight) _underlineThickness *= _retinaScale;
_drawFontSize = _fontSize;
}
_overflow = comp.overflow;
_canvasSize.width = _nodeContentSize.width;
_canvasSize.height = _nodeContentSize.height;
_hAlign = comp.horizontalAlign;
_vAlign = comp.verticalAlign;
_color = comp.node.color;
@ -250,14 +276,14 @@ export default class TTFAssembler extends Assembler2D {
_setupOutline () {
_context.strokeStyle = `rgba(${_outlineColor.r}, ${_outlineColor.g}, ${_outlineColor.b}, ${_outlineColor.a / 255})`;
_context.lineWidth = _outlineComp.width * 2;
_context.lineWidth = _outlineComp.width * 2 * (_isRetina ? _retinaScale : 1);
}
_setupShadow () {
_context.shadowColor = `rgba(${_shadowColor.r}, ${_shadowColor.g}, ${_shadowColor.b}, ${_shadowColor.a / 255})`;
_context.shadowBlur = _shadowComp.blur;
_context.shadowOffsetX = _shadowComp.offset.x;
_context.shadowOffsetY = -_shadowComp.offset.y;
_context.shadowBlur = _shadowComp.blur * (_isRetina ? _retinaScale : 1);
_context.shadowOffsetX = _shadowComp.offset.x * (_isRetina ? _retinaScale : 1);
_context.shadowOffsetY = -_shadowComp.offset.y * (_isRetina ? _retinaScale : 1);
}
_drawTextEffect (startPosition, lineHeight) {

View File

@ -121,6 +121,11 @@ export default class WebglBmfontAssembler extends BmfontAssembler {
// positions
const retinaScale = this.getTTFTextureSizeScale();
x /= retinaScale;
y /= retinaScale;
rectWidth /= retinaScale;
rectHeight /= retinaScale;
l = x;
r = x + rectWidth * scale;
b = y - rectHeight * scale;

View File

@ -49,10 +49,11 @@ export default class WebglTTFAssembler extends TTFAssembler {
super.updateColor(comp, color);
}
updateVerts (comp) {
updateVerts(comp) {
const scale = this.getTTFTextureSizeScale();
let node = comp.node,
canvasWidth = comp._ttfTexture.width,
canvasHeight = comp._ttfTexture.height,
canvasWidth = comp._ttfTexture.width / scale,
canvasHeight = comp._ttfTexture.height / scale,
appx = node.anchorX * node.width,
appy = node.anchorY * node.height;