Skip to content

feat: add blend mode argument #844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MakinoharaShoko merged 1 commit into from
Jan 27, 2026
+55 −2
Merged

feat: add blend mode argument #844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,6 +568,9 @@ export default class PixiStage {
if (metadata.zIndex) {
thisFigureContainer.zIndex = metadata.zIndex;
}
if (metadata.blendMode) {
thisFigureContainer.blendMode = metadata.blendMode;
}
}
// 挂载
this.figureContainer.addChild(thisFigureContainer);
Expand Down Expand Up @@ -664,6 +667,9 @@ export default class PixiStage {
if (metadata.zIndex) {
thisFigureContainer.zIndex = metadata.zIndex;
}
if (metadata.blendMode) {
thisFigureContainer.blendMode = metadata.blendMode;
}
Comment on lines +670 to +672
Copy link

@gemini-code-assist gemini-code-assist bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

这部分应用元数据的逻辑在 addLive2dFigure 和 addFigure 方法中是重复的。为了减少代码重复并提高可维护性，建议将这部分逻辑提取到一个私有辅助方法中。

例如，可以创建一个 applyFigureMetadata 方法：

private applyFigureMetadata(container: WebGALPixiContainer, key: string) {
  const metadata = this.getFigureMetadataByKey(key);
  if (metadata) {
    if (metadata.zIndex !== undefined) {
      container.zIndex = metadata.zIndex;
    }
    if (metadata.blendMode) {
      container.blendMode = metadata.blendMode;
    }
  }
}

然后在 addFigure 和 addLive2dFigure 中调用 this.applyFigureMetadata(thisFigureContainer, key); 来替代重复的代码块。

}
// 挂载
this.figureContainer.addChild(thisFigureContainer);
Expand Down
35 changes: 35 additions & 0 deletions packages/webgal/src/Core/controller/stage/pixi/WebGALPixiContainer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { BevelFilter } from '@/Core/controller/stage/pixi/shaders/BevelFilter';
import * as PIXI from 'pixi.js';
import { BlurFilter } from '@pixi/filter-blur';
import { INIT_RAD, RadiusAlphaFilter } from '@/Core/controller/stage/pixi/shaders/RadiusAlphaFilter';
import { logger } from '@/Core/util/logger';

/**
* Filter configuration for creation and default state detection.
Expand Down Expand Up @@ -347,6 +348,40 @@ export class WebGALPixiContainer extends PIXI.Container {
this.alphaFilter.alpha = v;
}

public get blendMode(): string {
switch (this.alphaFilter.blendMode) {
case PIXI.BLEND_MODES.NORMAL:
return 'normal';
case PIXI.BLEND_MODES.ADD:
return 'add';
case PIXI.BLEND_MODES.MULTIPLY:
return 'multiply';
case PIXI.BLEND_MODES.SCREEN:
return 'screen';
default:
logger.warn(`Unknown blend mode: ${this.alphaFilter.blendMode}, returning normal.`);
return 'normal';
}
}
public set blendMode(v: string) {
switch (v) {
case 'normal':
this.alphaFilter.blendMode = PIXI.BLEND_MODES.NORMAL;
break;
case 'add':
this.alphaFilter.blendMode = PIXI.BLEND_MODES.ADD;
break;
case 'multiply':
this.alphaFilter.blendMode = PIXI.BLEND_MODES.MULTIPLY;
break;
case 'screen':
this.alphaFilter.blendMode = PIXI.BLEND_MODES.SCREEN;
break;
default:
logger.warn(`Unknown blend mode: ${v}, setting to normal.`);
this.alphaFilter.blendMode = PIXI.BLEND_MODES.NORMAL;
}
}
Comment on lines +351 to +384
Copy link

@gemini-code-assist gemini-code-assist bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

为了提高代码的可维护性和可扩展性，建议使用映射（Map/Object）来处理字符串和 PIXI.BLEND_MODES 之间的转换，而不是使用 switch 语句。这样，当未来需要添加更多混合模式时，只需更新映射对象即可，代码会更简洁。

为了获得最佳性能，建议将这些映射对象提取为类的静态属性。

  public get blendMode(): string {
    const reverseBlendModeMap: Record<number, string> = {
      [PIXI.BLEND_MODES.NORMAL]: 'normal',
      [PIXI.BLEND_MODES.ADD]: 'add',
      [PIXI.BLEND_MODES.MULTIPLY]: 'multiply',
      [PIXI.BLEND_MODES.SCREEN]: 'screen',
    };
    const blendModeName = reverseBlendModeMap[this.alphaFilter.blendMode];
    if (blendModeName) {
      return blendModeName;
    }
    logger.warn(`Unknown blend mode: ${this.alphaFilter.blendMode}, returning normal.`);
    return 'normal';
  }
  public set blendMode(v: string) {
    const blendModeMap: Record<string, PIXI.BLEND_MODES> = {
      normal: PIXI.BLEND_MODES.NORMAL,
      add: PIXI.BLEND_MODES.ADD,
      multiply: PIXI.BLEND_MODES.MULTIPLY,
      screen: PIXI.BLEND_MODES.SCREEN,
    };
    const blendMode = blendModeMap[v];
    if (blendMode !== undefined) {
      this.alphaFilter.blendMode = blendMode;
    } else {
      logger.warn(`Unknown blend mode: ${v}, setting to normal.`);
      this.alphaFilter.blendMode = PIXI.BLEND_MODES.NORMAL;
    }
  }

public removeFilterByName(filterName: string) {
const filter = this.containerFilters.get(filterName);
if (!filter || !this.filters) return;
Expand Down
6 changes: 6 additions & 0 deletions packages/webgal/src/Core/gameScripts/changeFigure.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export function changeFigure(sentence: ISentence): IPerform {
const enterAnimation = getStringArgByKey(sentence, 'enter');
const exitAnimation = getStringArgByKey(sentence, 'exit');
let zIndex = getNumberArgByKey(sentence, 'zIndex') ?? -1;
let blendMode = getStringArgByKey(sentence, 'blendMode');
const enterDuration = getNumberArgByKey(sentence, 'enterDuration') ?? duration;
duration = enterDuration;
const exitDuration = getNumberArgByKey(sentence, 'exitDuration') ?? DEFAULT_FIG_OUT_DURATION;
Expand Down Expand Up @@ -232,11 +233,13 @@ export function changeFigure(sentence: ISentence): IPerform {
blink = blink ?? cloneDeep(baseBlinkParam);
focus = focus ?? cloneDeep(baseFocusParam);
zIndex = Math.max(zIndex, 0);
blendMode = blendMode ?? 'normal';
dispatch(stageActions.setLive2dMotion({ target: key, motion, overrideBounds: bounds }));
dispatch(stageActions.setLive2dExpression({ target: key, expression }));
dispatch(stageActions.setLive2dBlink({ target: key, blink }));
dispatch(stageActions.setLive2dFocus({ target: key, focus }));
dispatch(stageActions.setFigureMetaData([key, 'zIndex', zIndex, false]));
dispatch(stageActions.setFigureMetaData([key, 'blendMode', blendMode, false]));
} else {
// 当 url 没有发生变化时，即没有新立绘替换
// 应当保留旧立绘的状态，仅在需要时更新
Expand All @@ -255,6 +258,9 @@ export function changeFigure(sentence: ISentence): IPerform {
if (zIndex >= 0) {
dispatch(stageActions.setFigureMetaData([key, 'zIndex', zIndex, false]));
}
if (blendMode) {
dispatch(stageActions.setFigureMetaData([key, 'blendMode', blendMode, false]));
}
}
}

Expand Down
9 changes: 7 additions & 2 deletions packages/webgal/src/Stage/MainStage/useSetFigure.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,13 @@ export function useSetFigure(stageState: IStageState) {
useEffect(() => {
Object.entries(figureMetaData).forEach(([key, value]) => {
const figureObject = WebGAL.gameplay.pixiStage?.getStageObjByKey(key);
if (figureObject && !figureObject.isExiting && value?.zIndex !== undefined && figureObject.pixiContainer) {
figureObject.pixiContainer.zIndex = value.zIndex;
if (figureObject && !figureObject.isExiting && figureObject.pixiContainer) {
if (value.zIndex !== undefined) {
figureObject.pixiContainer.zIndex = value.zIndex;
}
if (value.blendMode !== undefined) {
figureObject.pixiContainer.blendMode = value.blendMode;
}
}
});
}, [figureMetaData]);
Expand Down
1 change: 1 addition & 0 deletions packages/webgal/src/store/stageInterface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ export interface ILive2DFocus {

export interface IFigureMetadata {
zIndex?: number;
blendMode?: string;
}

type figureMetaData = Record<string, IFigureMetadata>;
Expand Down