翻译注释
parent
a1c5667449
commit
a5fd852e63
|
@ -2,10 +2,10 @@
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"configurations": [
|
"configurations": [
|
||||||
{
|
{
|
||||||
"type": "chrome",
|
"type": "firefox",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
"name": "Launch Chrome",
|
"name": "Launch Firefox",
|
||||||
"url": "http://localhost:5000/Samples/TypeScript/Demo/",
|
"url": "http://localhost:8080/Samples/TypeScript/Demo/",
|
||||||
"webRoot": "${workspaceFolder}",
|
"webRoot": "${workspaceFolder}",
|
||||||
"sourceMaps": true,
|
"sourceMaps": true,
|
||||||
"sourceMapPathOverrides": {
|
"sourceMapPathOverrides": {
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
"typescript.tsdk": "./Samples/TypeScript/Demo/node_modules/typescript/lib"
|
"typescript.tsdk": "./Samples/TypeScript/Demo/node_modules/typescript/lib",
|
||||||
|
"cmake.configureOnOpen": true
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,367 @@
|
||||||
|
/**
|
||||||
|
* Copyright(c) Live2D Inc. All rights reserved.
|
||||||
|
*
|
||||||
|
* Use of this source code is governed by the Live2D Proprietary Software license
|
||||||
|
* that can be found at https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_en.html.
|
||||||
|
*/
|
||||||
|
declare namespace Live2DCubismCore {
|
||||||
|
/** Cubism version identifier. */
|
||||||
|
type csmVersion = number;
|
||||||
|
/** moc3 version identifier. */
|
||||||
|
type csmMocVersion = number;
|
||||||
|
/** Parameter type identifier. */
|
||||||
|
type csmParameterType = number;
|
||||||
|
/** Necessary alignment for mocs (in bytes). */
|
||||||
|
const AlignofMoc: number;
|
||||||
|
/** Necessary alignment for models (in bytes). */
|
||||||
|
const AlignofModel: number;
|
||||||
|
/** .moc3 file version Unknown */
|
||||||
|
const MocVersion_Unknown: number;
|
||||||
|
/** .moc3 file version 3.0.00 - 3.2.07 */
|
||||||
|
const MocVersion_30: number;
|
||||||
|
/** .moc3 file version 3.3.00 - 3.3.03 */
|
||||||
|
const MocVersion_33: number;
|
||||||
|
/** .moc3 file version 4.0.00 - 4.1.05 */
|
||||||
|
const MocVersion_40: number;
|
||||||
|
/** .moc3 file version 4.2.00 - 4.2.04 */
|
||||||
|
const MocVersion_42: number;
|
||||||
|
/** .moc3 file version 5.0.00 - */
|
||||||
|
const MocVersion_50: number;
|
||||||
|
/** Normal Parameter. */
|
||||||
|
const ParameterType_Normal: number;
|
||||||
|
/** Parameter for blend shape. */
|
||||||
|
const ParameterType_BlendShape: number;
|
||||||
|
/** Log handler.
|
||||||
|
*
|
||||||
|
* @param message Null-terminated string message to log.
|
||||||
|
*/
|
||||||
|
interface csmLogFunction {
|
||||||
|
(message: string): void;
|
||||||
|
}
|
||||||
|
/** Cubism version. */
|
||||||
|
class Version {
|
||||||
|
/**
|
||||||
|
* Queries Core version.
|
||||||
|
*
|
||||||
|
* @return Core version.
|
||||||
|
*/
|
||||||
|
static csmGetVersion(): csmVersion;
|
||||||
|
/**
|
||||||
|
* Gets Moc file supported latest version.
|
||||||
|
*
|
||||||
|
* @return Moc file latest format version.
|
||||||
|
*/
|
||||||
|
static csmGetLatestMocVersion(): csmMocVersion;
|
||||||
|
/**
|
||||||
|
* Gets Moc file format version.
|
||||||
|
*
|
||||||
|
* @param moc Moc
|
||||||
|
*
|
||||||
|
* @return csmMocVersion
|
||||||
|
*/
|
||||||
|
static csmGetMocVersion(moc: Moc, mocBytes: ArrayBuffer): csmMocVersion;
|
||||||
|
private constructor();
|
||||||
|
}
|
||||||
|
/** Cubism logging. */
|
||||||
|
class Logging {
|
||||||
|
private static logFunction;
|
||||||
|
/**
|
||||||
|
* Sets log handler.
|
||||||
|
*
|
||||||
|
* @param handler Handler to use.
|
||||||
|
*/
|
||||||
|
static csmSetLogFunction(handler: csmLogFunction): void;
|
||||||
|
/**
|
||||||
|
* Queries log handler.
|
||||||
|
*
|
||||||
|
* @return Log handler.
|
||||||
|
*/
|
||||||
|
static csmGetLogFunction(): csmLogFunction;
|
||||||
|
/**
|
||||||
|
* Wrap log function.
|
||||||
|
*
|
||||||
|
* @param messagePtr number
|
||||||
|
*
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
private static wrapLogFunction;
|
||||||
|
private constructor();
|
||||||
|
}
|
||||||
|
/** Cubism moc. */
|
||||||
|
class Moc {
|
||||||
|
/**
|
||||||
|
* Checks consistency of a moc.
|
||||||
|
*
|
||||||
|
* @param mocBytes Moc bytes.
|
||||||
|
*
|
||||||
|
* @returns '1' if Moc is valid; '0' otherwise.
|
||||||
|
*/
|
||||||
|
hasMocConsistency(mocBytes: ArrayBuffer): number;
|
||||||
|
/** Creates [[Moc]] from [[ArrayBuffer]].
|
||||||
|
*
|
||||||
|
* @param buffer Array buffer
|
||||||
|
*
|
||||||
|
* @return [[Moc]] on success; [[null]] otherwise.
|
||||||
|
*/
|
||||||
|
static fromArrayBuffer(buffer: ArrayBuffer): Moc;
|
||||||
|
/** Releases instance. */
|
||||||
|
_release(): void;
|
||||||
|
/** Native moc. */
|
||||||
|
_ptr: number;
|
||||||
|
/**
|
||||||
|
* Initializes instance.
|
||||||
|
*
|
||||||
|
* @param mocBytes Moc bytes.
|
||||||
|
*/
|
||||||
|
private constructor();
|
||||||
|
}
|
||||||
|
/** Cubism model. */
|
||||||
|
class Model {
|
||||||
|
/** Parameters. */
|
||||||
|
parameters: Parameters;
|
||||||
|
/** Parts. */
|
||||||
|
parts: Parts;
|
||||||
|
/** Drawables. */
|
||||||
|
drawables: Drawables;
|
||||||
|
/** Canvas information. */
|
||||||
|
canvasinfo: CanvasInfo;
|
||||||
|
/**
|
||||||
|
* Creates [[Model]] from [[Moc]].
|
||||||
|
*
|
||||||
|
* @param moc Moc
|
||||||
|
*
|
||||||
|
* @return [[Model]] on success; [[null]] otherwise.
|
||||||
|
*/
|
||||||
|
static fromMoc(moc: Moc): Model;
|
||||||
|
/** Updates instance. */
|
||||||
|
update(): void;
|
||||||
|
/** Releases instance. */
|
||||||
|
release(): void;
|
||||||
|
/** Native model. */
|
||||||
|
_ptr: number;
|
||||||
|
/**
|
||||||
|
* Initializes instance.
|
||||||
|
*
|
||||||
|
* @param moc Moc
|
||||||
|
*/
|
||||||
|
private constructor();
|
||||||
|
}
|
||||||
|
/** Canvas information interface. */
|
||||||
|
class CanvasInfo {
|
||||||
|
/** Width of native model canvas. */
|
||||||
|
CanvasWidth: number;
|
||||||
|
/** Height of native model canvas. */
|
||||||
|
CanvasHeight: number;
|
||||||
|
/** Coordinate origin of X axis. */
|
||||||
|
CanvasOriginX: number;
|
||||||
|
/** Coordinate origin of Y axis. */
|
||||||
|
CanvasOriginY: number;
|
||||||
|
/** Pixels per unit of native model. */
|
||||||
|
PixelsPerUnit: number;
|
||||||
|
/**
|
||||||
|
* Initializes instance.
|
||||||
|
*
|
||||||
|
* @param modelPtr Native model pointer.
|
||||||
|
*/
|
||||||
|
constructor(modelPtr: number);
|
||||||
|
}
|
||||||
|
/** Cubism model parameters */
|
||||||
|
class Parameters {
|
||||||
|
/** Parameter count. */
|
||||||
|
count: number;
|
||||||
|
/** Parameter IDs. */
|
||||||
|
ids: Array<string>;
|
||||||
|
/** Minimum parameter values. */
|
||||||
|
minimumValues: Float32Array;
|
||||||
|
/** Parameter types. */
|
||||||
|
types: Int32Array;
|
||||||
|
/** Maximum parameter values. */
|
||||||
|
maximumValues: Float32Array;
|
||||||
|
/** Default parameter values. */
|
||||||
|
defaultValues: Float32Array;
|
||||||
|
/** Parameter values. */
|
||||||
|
values: Float32Array;
|
||||||
|
/** Number of key values of each parameter. */
|
||||||
|
keyCounts: Int32Array;
|
||||||
|
/** Key values of each parameter. */
|
||||||
|
keyValues: Array<Float32Array>;
|
||||||
|
/**
|
||||||
|
* Initializes instance.
|
||||||
|
*
|
||||||
|
* @param modelPtr Native model.
|
||||||
|
*/
|
||||||
|
constructor(modelPtr: number);
|
||||||
|
}
|
||||||
|
/** Cubism model parts */
|
||||||
|
class Parts {
|
||||||
|
/** Part count. */
|
||||||
|
count: number;
|
||||||
|
/** Part IDs. */
|
||||||
|
ids: Array<string>;
|
||||||
|
/** Opacity values. */
|
||||||
|
opacities: Float32Array;
|
||||||
|
/** Part's parent part indices. */
|
||||||
|
parentIndices: Int32Array;
|
||||||
|
/**
|
||||||
|
* Initializes instance.
|
||||||
|
*
|
||||||
|
* @param modelPtr Native model.
|
||||||
|
*/
|
||||||
|
constructor(modelPtr: number);
|
||||||
|
}
|
||||||
|
/** Cubism model drawables */
|
||||||
|
class Drawables {
|
||||||
|
/** Drawable count. */
|
||||||
|
count: number;
|
||||||
|
/** Drawable IDs. */
|
||||||
|
ids: Array<string>;
|
||||||
|
/** Constant drawable flags. */
|
||||||
|
constantFlags: Uint8Array;
|
||||||
|
/** Dynamic drawable flags. */
|
||||||
|
dynamicFlags: Uint8Array;
|
||||||
|
/** Drawable texture indices. */
|
||||||
|
textureIndices: Int32Array;
|
||||||
|
/** Drawable draw orders. */
|
||||||
|
drawOrders: Int32Array;
|
||||||
|
/** Drawable render orders. */
|
||||||
|
renderOrders: Int32Array;
|
||||||
|
/** Drawable opacities. */
|
||||||
|
opacities: Float32Array;
|
||||||
|
/** Mask count for each drawable. */
|
||||||
|
maskCounts: Int32Array;
|
||||||
|
/** Masks for each drawable. */
|
||||||
|
masks: Array<Int32Array>;
|
||||||
|
/** Number of vertices of each drawable. */
|
||||||
|
vertexCounts: Int32Array;
|
||||||
|
/** 2D vertex position data of each drawable. */
|
||||||
|
vertexPositions: Array<Float32Array>;
|
||||||
|
/** 2D texture coordinate data of each drawables. */
|
||||||
|
vertexUvs: Array<Float32Array>;
|
||||||
|
/** Number of triangle indices for each drawable. */
|
||||||
|
indexCounts: Int32Array;
|
||||||
|
/** Triangle index data for each drawable. */
|
||||||
|
indices: Array<Uint16Array>;
|
||||||
|
/** Information multiply color. */
|
||||||
|
multiplyColors: Float32Array;
|
||||||
|
/** Information Screen color. */
|
||||||
|
screenColors: Float32Array;
|
||||||
|
/** Indices of drawables parent part. */
|
||||||
|
parentPartIndices: Int32Array;
|
||||||
|
/** Resets all dynamic drawable flags.. */
|
||||||
|
resetDynamicFlags(): void;
|
||||||
|
/** Native model. */
|
||||||
|
private _modelPtr;
|
||||||
|
/**
|
||||||
|
* Initializes instance.
|
||||||
|
*
|
||||||
|
* @param modelPtr Native model.
|
||||||
|
*/
|
||||||
|
constructor(modelPtr: number);
|
||||||
|
}
|
||||||
|
/** Utility functions. */
|
||||||
|
class Utils {
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasBlendAdditiveBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasBlendMultiplicativeBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasIsDoubleSidedBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasIsInvertedMaskBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasIsVisibleBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasVisibilityDidChangeBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasOpacityDidChangeBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasDrawOrderDidChangeBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasRenderOrderDidChangeBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasVertexPositionsDidChangeBit(bitfield: number): boolean;
|
||||||
|
/**
|
||||||
|
* Checks whether flag is set in bitfield.
|
||||||
|
*
|
||||||
|
* @param bitfield Bitfield to query against.
|
||||||
|
*
|
||||||
|
* @return [[true]] if bit set; [[false]] otherwise
|
||||||
|
*/
|
||||||
|
static hasBlendColorDidChangeBit(bitfield: number): boolean;
|
||||||
|
}
|
||||||
|
/** Memory functions. */
|
||||||
|
class Memory {
|
||||||
|
/**
|
||||||
|
* HACK:
|
||||||
|
* Extend memory size allocated during module initialization.
|
||||||
|
* If the specified size is less than or equal to 16777216(byte), the default of 16 MB is allocated.
|
||||||
|
*
|
||||||
|
* @see https://github.com/emscripten-core/emscripten/blob/main/src/settings.js#L161
|
||||||
|
*
|
||||||
|
* @param size allocated memory size [byte(s)]
|
||||||
|
*/
|
||||||
|
static initializeAmountOfMemory(size: number): void;
|
||||||
|
private constructor();
|
||||||
|
}
|
||||||
|
/** Emscripten Cubism Core module. */
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -8,13 +8,13 @@
|
||||||
import { LogLevel } from '@framework/live2dcubismframework';
|
import { LogLevel } from '@framework/live2dcubismframework';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sample Appで使用する定数
|
* Sample App中使用的常量
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Canvas width and height pixel values, or dynamic screen size ('auto').
|
// Canvas的宽和高的像素值,或动态屏幕大小('auto')。
|
||||||
export const CanvasSize: { width: number; height: number } | 'auto' = 'auto';
|
export const CanvasSize: { width: number; height: number } | 'auto' = 'auto';
|
||||||
|
|
||||||
// 画面
|
// 屏幕
|
||||||
export const ViewScale = 1.0;
|
export const ViewScale = 1.0;
|
||||||
export const ViewMaxScale = 2.0;
|
export const ViewMaxScale = 2.0;
|
||||||
export const ViewMinScale = 0.8;
|
export const ViewMinScale = 0.8;
|
||||||
|
@ -29,21 +29,21 @@ export const ViewLogicalMaxRight = 2.0;
|
||||||
export const ViewLogicalMaxBottom = -2.0;
|
export const ViewLogicalMaxBottom = -2.0;
|
||||||
export const ViewLogicalMaxTop = 2.0;
|
export const ViewLogicalMaxTop = 2.0;
|
||||||
|
|
||||||
// 相対パス
|
// 相对路径
|
||||||
export const ResourcesPath = '../../Resources/';
|
export const ResourcesPath = '../../Resources/';
|
||||||
|
|
||||||
// モデルの後ろにある背景の画像ファイル
|
// 在模型后面的背景图片文件
|
||||||
export const BackImageName = 'back_class_normal.png';
|
export const BackImageName = 'back_class_normal.png';
|
||||||
|
|
||||||
// 歯車
|
// 齿轮
|
||||||
export const GearImageName = 'icon_gear.png';
|
export const GearImageName = 'icon_gear.png';
|
||||||
|
|
||||||
// 終了ボタン
|
// 关闭按钮
|
||||||
export const PowerImageName = 'CloseNormal.png';
|
export const PowerImageName = 'CloseNormal.png';
|
||||||
|
|
||||||
// モデル定義---------------------------------------------
|
// 模型定义---------------------------------------------
|
||||||
// モデルを配置したディレクトリ名の配列
|
// 部署模型的目录名数组
|
||||||
// ディレクトリ名とmodel3.jsonの名前を一致させておくこと
|
// 请将目录名和model3.json的名字匹配
|
||||||
export const ModelDir: string[] = [
|
export const ModelDir: string[] = [
|
||||||
'Haru',
|
'Haru',
|
||||||
'Hiyori',
|
'Hiyori',
|
||||||
|
@ -55,30 +55,30 @@ export const ModelDir: string[] = [
|
||||||
];
|
];
|
||||||
export const ModelDirSize: number = ModelDir.length;
|
export const ModelDirSize: number = ModelDir.length;
|
||||||
|
|
||||||
// 外部定義ファイル(json)と合わせる
|
// 与外部定义文件(json)匹配
|
||||||
export const MotionGroupIdle = 'Idle'; // アイドリング
|
export const MotionGroupIdle = 'Idle'; // 空闲
|
||||||
export const MotionGroupTapBody = 'TapBody'; // 体をタップしたとき
|
export const MotionGroupTapBody = 'TapBody'; // 点击身体时
|
||||||
|
|
||||||
// 外部定義ファイル(json)と合わせる
|
// 与外部定义文件(json)匹配
|
||||||
export const HitAreaNameHead = 'Head';
|
export const HitAreaNameHead = 'Head';
|
||||||
export const HitAreaNameBody = 'Body';
|
export const HitAreaNameBody = 'Body';
|
||||||
|
|
||||||
// モーションの優先度定数
|
// 动作的优先级常量
|
||||||
export const PriorityNone = 0;
|
export const PriorityNone = 0;
|
||||||
export const PriorityIdle = 1;
|
export const PriorityIdle = 1;
|
||||||
export const PriorityNormal = 2;
|
export const PriorityNormal = 2;
|
||||||
export const PriorityForce = 3;
|
export const PriorityForce = 3;
|
||||||
|
|
||||||
// MOC3の一貫性検証オプション
|
// MOC3的一致性验证选项
|
||||||
export const MOCConsistencyValidationEnable = true;
|
export const MOCConsistencyValidationEnable = true;
|
||||||
|
|
||||||
// デバッグ用ログの表示オプション
|
// 显示用于调试的日志的选项
|
||||||
export const DebugLogEnable = true;
|
export const DebugLogEnable = true;
|
||||||
export const DebugTouchLogEnable = false;
|
export const DebugTouchLogEnable = false;
|
||||||
|
|
||||||
// Frameworkから出力するログのレベル設定
|
// 设置从框架输出的日志的级别
|
||||||
export const CubismLoggingLevel: LogLevel = LogLevel.LogLevel_Verbose;
|
export const CubismLoggingLevel: LogLevel = LogLevel.LogLevel_Verbose;
|
||||||
|
|
||||||
// デフォルトのレンダーターゲットサイズ
|
// 默认的渲染目标大小
|
||||||
export const RenderTargetWidth = 1900;
|
export const RenderTargetWidth = 1900;
|
||||||
export const RenderTargetHeight = 1000;
|
export const RenderTargetHeight = 1000;
|
||||||
|
|
|
@ -19,15 +19,15 @@ export let gl: WebGLRenderingContext = null;
|
||||||
export let frameBuffer: WebGLFramebuffer = null;
|
export let frameBuffer: WebGLFramebuffer = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* アプリケーションクラス。
|
* 应用程序类。
|
||||||
* Cubism SDKの管理を行う。
|
* 进行Cubism SDK的管理。
|
||||||
*/
|
*/
|
||||||
export class LAppDelegate {
|
export class LAppDelegate {
|
||||||
/**
|
/**
|
||||||
* クラスのインスタンス(シングルトン)を返す。
|
* 返回类的实例(单例)。
|
||||||
* インスタンスが生成されていない場合は内部でインスタンスを生成する。
|
* 如果实例尚未生成,则在内部生成实例。
|
||||||
*
|
*
|
||||||
* @return クラスのインスタンス
|
* @return 类的实例
|
||||||
*/
|
*/
|
||||||
public static getInstance(): LAppDelegate {
|
public static getInstance(): LAppDelegate {
|
||||||
if (s_instance == null) {
|
if (s_instance == null) {
|
||||||
|
@ -38,7 +38,7 @@ export class LAppDelegate {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* クラスのインスタンス(シングルトン)を解放する。
|
* 释放类的实例(单例)。
|
||||||
*/
|
*/
|
||||||
public static releaseInstance(): void {
|
public static releaseInstance(): void {
|
||||||
if (s_instance != null) {
|
if (s_instance != null) {
|
||||||
|
@ -49,13 +49,13 @@ export class LAppDelegate {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* APPに必要な物を初期化する。
|
* 初始化对APP必要的东西。
|
||||||
*/
|
*/
|
||||||
public initialize(): boolean {
|
public initialize(): boolean {
|
||||||
// キャンバスの作成
|
// 创建画布
|
||||||
canvas = document.createElement('canvas');
|
canvas = document.createElement('canvas');
|
||||||
|
|
||||||
// glコンテキストを初期化
|
// 初始化webgl上下文
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
|
gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
|
||||||
|
|
||||||
|
@ -66,11 +66,11 @@ export class LAppDelegate {
|
||||||
document.body.innerHTML =
|
document.body.innerHTML =
|
||||||
'This browser does not support the <code><canvas></code> element.';
|
'This browser does not support the <code><canvas></code> element.';
|
||||||
|
|
||||||
// gl初期化失敗
|
// webgl初始化失败
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// キャンバスを DOM に追加
|
// 将画布添加到DOM中
|
||||||
document.body.appendChild(canvas);
|
document.body.appendChild(canvas);
|
||||||
|
|
||||||
if (LAppDefine.CanvasSize === 'auto') {
|
if (LAppDefine.CanvasSize === 'auto') {
|
||||||
|
@ -84,29 +84,29 @@ export class LAppDelegate {
|
||||||
frameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
|
frameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 透過設定
|
// 启用透明设置
|
||||||
gl.enable(gl.BLEND);
|
gl.enable(gl.BLEND);
|
||||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
||||||
|
|
||||||
const supportTouch: boolean = 'ontouchend' in canvas;
|
const supportTouch: boolean = 'ontouchend' in canvas;
|
||||||
|
|
||||||
if (supportTouch) {
|
if (supportTouch) {
|
||||||
// タッチ関連コールバック関数登録
|
// 注册触摸相关的回调函数
|
||||||
canvas.addEventListener('touchstart', onTouchBegan, { passive: true });
|
canvas.addEventListener('touchstart', onTouchBegan, { passive: true });
|
||||||
canvas.addEventListener('touchmove', onTouchMoved, { passive: true });
|
canvas.addEventListener('touchmove', onTouchMoved, { passive: true });
|
||||||
canvas.addEventListener('touchend', onTouchEnded, { passive: true });
|
canvas.addEventListener('touchend', onTouchEnded, { passive: true });
|
||||||
canvas.addEventListener('touchcancel', onTouchCancel, { passive: true });
|
canvas.addEventListener('touchcancel', onTouchCancel, { passive: true });
|
||||||
} else {
|
} else {
|
||||||
// マウス関連コールバック関数登録
|
// 注册鼠标相关的回调函数
|
||||||
canvas.addEventListener('mousedown', onClickBegan, { passive: true });
|
canvas.addEventListener('mousedown', onClickBegan, { passive: true });
|
||||||
canvas.addEventListener('mousemove', onMouseMoved, { passive: true });
|
canvas.addEventListener('mousemove', onMouseMoved, { passive: true });
|
||||||
canvas.addEventListener('mouseup', onClickEnded, { passive: true });
|
canvas.addEventListener('mouseup', onClickEnded, { passive: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
// AppViewの初期化
|
// 初始化AppView
|
||||||
this._view.initialize();
|
this._view.initialize();
|
||||||
|
|
||||||
// Cubism SDKの初期化
|
// 初始化Cubism SDK
|
||||||
this.initializeCubism();
|
this.initializeCubism();
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
|
@ -122,7 +122,7 @@ export class LAppDelegate {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解放する。
|
* 释放资源。
|
||||||
*/
|
*/
|
||||||
public release(): void {
|
public release(): void {
|
||||||
this._textureManager.release();
|
this._textureManager.release();
|
||||||
|
@ -131,59 +131,59 @@ export class LAppDelegate {
|
||||||
this._view.release();
|
this._view.release();
|
||||||
this._view = null;
|
this._view = null;
|
||||||
|
|
||||||
// リソースを解放
|
// 释放资源
|
||||||
LAppLive2DManager.releaseInstance();
|
LAppLive2DManager.releaseInstance();
|
||||||
|
|
||||||
// Cubism SDKの解放
|
// 释放Cubism SDK
|
||||||
CubismFramework.dispose();
|
CubismFramework.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 実行処理。
|
* 执行处理。
|
||||||
*/
|
*/
|
||||||
public run(): void {
|
public run(): void {
|
||||||
// メインループ
|
// 主循环
|
||||||
const loop = (): void => {
|
const loop = (): void => {
|
||||||
// インスタンスの有無の確認
|
// 检查实例是否存在
|
||||||
if (s_instance == null) {
|
if (s_instance == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 時間更新
|
// 更新时间
|
||||||
LAppPal.updateTime();
|
LAppPal.updateTime();
|
||||||
|
|
||||||
// 画面の初期化
|
// 初始化屏幕
|
||||||
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||||
|
|
||||||
// 深度テストを有効化
|
// 启用深度测试
|
||||||
gl.enable(gl.DEPTH_TEST);
|
gl.enable(gl.DEPTH_TEST);
|
||||||
|
|
||||||
// 近くにある物体は、遠くにある物体を覆い隠す
|
// 近处的物体会覆盖远处的物体
|
||||||
gl.depthFunc(gl.LEQUAL);
|
gl.depthFunc(gl.LEQUAL);
|
||||||
|
|
||||||
// カラーバッファや深度バッファをクリアする
|
// 清除颜色缓冲区和深度缓冲区
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||||
|
|
||||||
gl.clearDepth(1.0);
|
gl.clearDepth(1.0);
|
||||||
|
|
||||||
// 透過設定
|
// 启用透明设置
|
||||||
gl.enable(gl.BLEND);
|
gl.enable(gl.BLEND);
|
||||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
||||||
|
|
||||||
// 描画更新
|
// 更新绘制
|
||||||
this._view.render();
|
this._view.render();
|
||||||
|
|
||||||
// ループのために再帰呼び出し
|
// 为了循环再次调用
|
||||||
requestAnimationFrame(loop);
|
requestAnimationFrame(loop);
|
||||||
};
|
};
|
||||||
loop();
|
loop();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* シェーダーを登録する。
|
* 创建阴影。
|
||||||
*/
|
*/
|
||||||
public createShader(): WebGLProgram {
|
public createShader(): WebGLProgram {
|
||||||
// バーテックスシェーダーのコンパイル
|
// 编译顶点着色器
|
||||||
const vertexShaderId = gl.createShader(gl.VERTEX_SHADER);
|
const vertexShaderId = gl.createShader(gl.VERTEX_SHADER);
|
||||||
|
|
||||||
if (vertexShaderId == null) {
|
if (vertexShaderId == null) {
|
||||||
|
@ -205,7 +205,7 @@ export class LAppDelegate {
|
||||||
gl.shaderSource(vertexShaderId, vertexShader);
|
gl.shaderSource(vertexShaderId, vertexShader);
|
||||||
gl.compileShader(vertexShaderId);
|
gl.compileShader(vertexShaderId);
|
||||||
|
|
||||||
// フラグメントシェーダのコンパイル
|
// 编译片段着色器
|
||||||
const fragmentShaderId = gl.createShader(gl.FRAGMENT_SHADER);
|
const fragmentShaderId = gl.createShader(gl.FRAGMENT_SHADER);
|
||||||
|
|
||||||
if (fragmentShaderId == null) {
|
if (fragmentShaderId == null) {
|
||||||
|
@ -225,7 +225,7 @@ export class LAppDelegate {
|
||||||
gl.shaderSource(fragmentShaderId, fragmentShader);
|
gl.shaderSource(fragmentShaderId, fragmentShader);
|
||||||
gl.compileShader(fragmentShaderId);
|
gl.compileShader(fragmentShaderId);
|
||||||
|
|
||||||
// プログラムオブジェクトの作成
|
// 创建程序对象
|
||||||
const programId = gl.createProgram();
|
const programId = gl.createProgram();
|
||||||
gl.attachShader(programId, vertexShaderId);
|
gl.attachShader(programId, vertexShaderId);
|
||||||
gl.attachShader(programId, fragmentShaderId);
|
gl.attachShader(programId, fragmentShaderId);
|
||||||
|
@ -233,7 +233,7 @@ export class LAppDelegate {
|
||||||
gl.deleteShader(vertexShaderId);
|
gl.deleteShader(vertexShaderId);
|
||||||
gl.deleteShader(fragmentShaderId);
|
gl.deleteShader(fragmentShaderId);
|
||||||
|
|
||||||
// リンク
|
// 链接
|
||||||
gl.linkProgram(programId);
|
gl.linkProgram(programId);
|
||||||
|
|
||||||
gl.useProgram(programId);
|
gl.useProgram(programId);
|
||||||
|
@ -242,7 +242,7 @@ export class LAppDelegate {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* View情報を取得する。
|
* 获取View信息。
|
||||||
*/
|
*/
|
||||||
public getView(): LAppView {
|
public getView(): LAppView {
|
||||||
return this._view;
|
return this._view;
|
||||||
|
@ -253,7 +253,7 @@ export class LAppDelegate {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* コンストラクタ
|
* 构造函数
|
||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
this._captured = false;
|
this._captured = false;
|
||||||
|
@ -267,18 +267,18 @@ export class LAppDelegate {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Cubism SDKの初期化
|
* 初始化Cubism SDK
|
||||||
*/
|
*/
|
||||||
public initializeCubism(): void {
|
public initializeCubism(): void {
|
||||||
// setup cubism
|
// 设置cubism
|
||||||
this._cubismOption.logFunction = LAppPal.printMessage;
|
this._cubismOption.logFunction = LAppPal.printMessage;
|
||||||
this._cubismOption.loggingLevel = LAppDefine.CubismLoggingLevel;
|
this._cubismOption.loggingLevel = LAppDefine.CubismLoggingLevel;
|
||||||
CubismFramework.startUp(this._cubismOption);
|
CubismFramework.startUp(this._cubismOption);
|
||||||
|
|
||||||
// initialize cubism
|
// 初始化cubism
|
||||||
CubismFramework.initialize();
|
CubismFramework.initialize();
|
||||||
|
|
||||||
// load model
|
// 加载模型
|
||||||
LAppLive2DManager.getInstance();
|
LAppLive2DManager.getInstance();
|
||||||
|
|
||||||
LAppPal.updateTime();
|
LAppPal.updateTime();
|
||||||
|
@ -287,7 +287,7 @@ export class LAppDelegate {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Resize the canvas to fill the screen.
|
* 调整画布大小以填充屏幕。
|
||||||
*/
|
*/
|
||||||
private _resizeCanvas(): void {
|
private _resizeCanvas(): void {
|
||||||
canvas.width = canvas.clientWidth * window.devicePixelRatio;
|
canvas.width = canvas.clientWidth * window.devicePixelRatio;
|
||||||
|
@ -295,17 +295,17 @@ export class LAppDelegate {
|
||||||
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
_cubismOption: Option; // Cubism SDK Option
|
_cubismOption: Option; // Cubism SDK选项
|
||||||
_view: LAppView; // View情報
|
_view: LAppView; // View信息
|
||||||
_captured: boolean; // クリックしているか
|
_captured: boolean; // 是否要捕获
|
||||||
_mouseX: number; // マウスX座標
|
_mouseX: number; // 鼠标X坐标
|
||||||
_mouseY: number; // マウスY座標
|
_mouseY: number; // 鼠标Y坐标
|
||||||
_isEnd: boolean; // APP終了しているか
|
_isEnd: boolean; // APP是否已结束
|
||||||
_textureManager: LAppTextureManager; // テクスチャマネージャー
|
_textureManager: LAppTextureManager; // 纹理管理器
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* クリックしたときに呼ばれる。
|
* 点击时调用。
|
||||||
*/
|
*/
|
||||||
function onClickBegan(e: MouseEvent): void {
|
function onClickBegan(e: MouseEvent): void {
|
||||||
if (!LAppDelegate.getInstance()._view) {
|
if (!LAppDelegate.getInstance()._view) {
|
||||||
|
@ -321,7 +321,7 @@ function onClickBegan(e: MouseEvent): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* マウスポインタが動いたら呼ばれる。
|
* 当鼠标指针移动时调用。
|
||||||
*/
|
*/
|
||||||
function onMouseMoved(e: MouseEvent): void {
|
function onMouseMoved(e: MouseEvent): void {
|
||||||
if (!LAppDelegate.getInstance()._captured) {
|
if (!LAppDelegate.getInstance()._captured) {
|
||||||
|
@ -341,7 +341,7 @@ function onMouseMoved(e: MouseEvent): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* クリックが終了したら呼ばれる。
|
* 点击结束时调用。
|
||||||
*/
|
*/
|
||||||
function onClickEnded(e: MouseEvent): void {
|
function onClickEnded(e: MouseEvent): void {
|
||||||
LAppDelegate.getInstance()._captured = false;
|
LAppDelegate.getInstance()._captured = false;
|
||||||
|
@ -358,7 +358,7 @@ function onClickEnded(e: MouseEvent): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* タッチしたときに呼ばれる。
|
* 触摸时调用。
|
||||||
*/
|
*/
|
||||||
function onTouchBegan(e: TouchEvent): void {
|
function onTouchBegan(e: TouchEvent): void {
|
||||||
if (!LAppDelegate.getInstance()._view) {
|
if (!LAppDelegate.getInstance()._view) {
|
||||||
|
@ -375,7 +375,7 @@ function onTouchBegan(e: TouchEvent): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* スワイプすると呼ばれる。
|
* 滑动时调用。
|
||||||
*/
|
*/
|
||||||
function onTouchMoved(e: TouchEvent): void {
|
function onTouchMoved(e: TouchEvent): void {
|
||||||
if (!LAppDelegate.getInstance()._captured) {
|
if (!LAppDelegate.getInstance()._captured) {
|
||||||
|
@ -396,7 +396,7 @@ function onTouchMoved(e: TouchEvent): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* タッチが終了したら呼ばれる。
|
* 触摸结束时调用。
|
||||||
*/
|
*/
|
||||||
function onTouchEnded(e: TouchEvent): void {
|
function onTouchEnded(e: TouchEvent): void {
|
||||||
LAppDelegate.getInstance()._captured = false;
|
LAppDelegate.getInstance()._captured = false;
|
||||||
|
@ -415,7 +415,7 @@ function onTouchEnded(e: TouchEvent): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* タッチがキャンセルされると呼ばれる。
|
* 触摸被取消时调用。
|
||||||
*/
|
*/
|
||||||
function onTouchCancel(e: TouchEvent): void {
|
function onTouchCancel(e: TouchEvent): void {
|
||||||
LAppDelegate.getInstance()._captured = false;
|
LAppDelegate.getInstance()._captured = false;
|
||||||
|
|
|
@ -17,15 +17,14 @@ import { LAppPal } from './lapppal';
|
||||||
export let s_instance: LAppLive2DManager = null;
|
export let s_instance: LAppLive2DManager = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* サンプルアプリケーションにおいてCubismModelを管理するクラス
|
* 在示例应用程序中管理CubismModel的类
|
||||||
* モデル生成と破棄、タップイベントの処理、モデル切り替えを行う。
|
* 它负责模型的生成和销毁,处理点击事件,更换模型。
|
||||||
*/
|
*/
|
||||||
export class LAppLive2DManager {
|
export class LAppLive2DManager {
|
||||||
/**
|
/**
|
||||||
* クラスのインスタンス(シングルトン)を返す。
|
* 返回类的实例(单例)。
|
||||||
* インスタンスが生成されていない場合は内部でインスタンスを生成する。
|
* 如果实例尚未生成,则在内部生成实例。
|
||||||
*
|
* @return 类的实例
|
||||||
* @return クラスのインスタンス
|
|
||||||
*/
|
*/
|
||||||
public static getInstance(): LAppLive2DManager {
|
public static getInstance(): LAppLive2DManager {
|
||||||
if (s_instance == null) {
|
if (s_instance == null) {
|
||||||
|
@ -36,7 +35,7 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* クラスのインスタンス(シングルトン)を解放する。
|
* 释放类的实例(单例)。
|
||||||
*/
|
*/
|
||||||
public static releaseInstance(): void {
|
public static releaseInstance(): void {
|
||||||
if (s_instance != null) {
|
if (s_instance != null) {
|
||||||
|
@ -47,10 +46,10 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 現在のシーンで保持しているモデルを返す。
|
* 返回当前场景中持有的模型。
|
||||||
*
|
*
|
||||||
* @param no モデルリストのインデックス値
|
* @param no 模型列表的索引值
|
||||||
* @return モデルのインスタンスを返す。インデックス値が範囲外の場合はNULLを返す。
|
* @return 返回模型的实例。如果索引值超出范围,则返回NULL。
|
||||||
*/
|
*/
|
||||||
public getModel(no: number): LAppModel {
|
public getModel(no: number): LAppModel {
|
||||||
if (no < this._models.getSize()) {
|
if (no < this._models.getSize()) {
|
||||||
|
@ -61,7 +60,7 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 現在のシーンで保持しているすべてのモデルを解放する
|
* 释放当前场景中持有的所有模型
|
||||||
*/
|
*/
|
||||||
public releaseAllModel(): void {
|
public releaseAllModel(): void {
|
||||||
for (let i = 0; i < this._models.getSize(); i++) {
|
for (let i = 0; i < this._models.getSize(); i++) {
|
||||||
|
@ -73,10 +72,9 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画面をドラッグした時の処理
|
* 处理所有管理器中模型的拖动事件。
|
||||||
*
|
* @param x - 拖动事件的x坐标。
|
||||||
* @param x 画面のX座標
|
* @param y - 拖动事件的y坐标。
|
||||||
* @param y 画面のY座標
|
|
||||||
*/
|
*/
|
||||||
public onDrag(x: number, y: number): void {
|
public onDrag(x: number, y: number): void {
|
||||||
for (let i = 0; i < this._models.getSize(); i++) {
|
for (let i = 0; i < this._models.getSize(); i++) {
|
||||||
|
@ -89,10 +87,14 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画面をタップした時の処理
|
* 处理屏幕上的点击事件
|
||||||
*
|
*
|
||||||
* @param x 画面のX座標
|
* @param x 屏幕的X坐标
|
||||||
* @param y 画面のY座標
|
* @param y 屏幕的Y坐标
|
||||||
|
* 这段代码是一个注释,描述了在Lapplive2DManager类中的onTap方法的功能。
|
||||||
|
* 该方法用于处理屏幕上的触摸事件,当用户点击模型的头部时,模型将随机切
|
||||||
|
* 换表情;当用户点击模型的身体时,模型将开始随机动作。该注释还包括两个
|
||||||
|
* 参数:x和y,它们表示触摸事件发生的屏幕坐标。
|
||||||
*/
|
*/
|
||||||
public onTap(x: number, y: number): void {
|
public onTap(x: number, y: number): void {
|
||||||
if (LAppDefine.DebugLogEnable) {
|
if (LAppDefine.DebugLogEnable) {
|
||||||
|
@ -127,8 +129,8 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画面を更新するときの処理
|
* 更新屏幕时的处理
|
||||||
* モデルの更新処理及び描画処理を行う
|
* 执行模型的更新处理和绘图处理
|
||||||
*/
|
*/
|
||||||
public onUpdate(): void {
|
public onUpdate(): void {
|
||||||
const { width, height } = canvas;
|
const { width, height } = canvas;
|
||||||
|
@ -141,27 +143,27 @@ export class LAppLive2DManager {
|
||||||
|
|
||||||
if (model.getModel()) {
|
if (model.getModel()) {
|
||||||
if (model.getModel().getCanvasWidth() > 1.0 && width < height) {
|
if (model.getModel().getCanvasWidth() > 1.0 && width < height) {
|
||||||
// 横に長いモデルを縦長ウィンドウに表示する際モデルの横サイズでscaleを算出する
|
// 当在纵向窗口中显示横向模型时,根据模型的横向大小计算比例
|
||||||
model.getModelMatrix().setWidth(2.0);
|
model.getModelMatrix().setWidth(2.0);
|
||||||
projection.scale(1.0, width / height);
|
projection.scale(1.0, width / height);
|
||||||
} else {
|
} else {
|
||||||
projection.scale(height / width, 1.0);
|
projection.scale(height / width, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 必要があればここで乗算
|
// 如果需要,在这里进行乘法
|
||||||
if (this._viewMatrix != null) {
|
if (this._viewMatrix != null) {
|
||||||
projection.multiplyByMatrix(this._viewMatrix);
|
projection.multiplyByMatrix(this._viewMatrix);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
model.update();
|
model.update();
|
||||||
model.draw(projection); // 参照渡しなのでprojectionは変質する。
|
model.draw(projection); // 传递引用,所以projection会改变。
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 次のシーンに切りかえる
|
* 切换到下一个场景
|
||||||
* サンプルアプリケーションではモデルセットの切り替えを行う。
|
* 在示例应用程序中,切换模型集。
|
||||||
*/
|
*/
|
||||||
public nextScene(): void {
|
public nextScene(): void {
|
||||||
const no: number = (this._sceneIndex + 1) % LAppDefine.ModelDirSize;
|
const no: number = (this._sceneIndex + 1) % LAppDefine.ModelDirSize;
|
||||||
|
@ -169,8 +171,9 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* シーンを切り替える
|
* 切换到指定索引的场景。
|
||||||
* サンプルアプリケーションではモデルセットの切り替えを行う。
|
* @param index - 要切换到的场景的索引。
|
||||||
|
* @returns void
|
||||||
*/
|
*/
|
||||||
public changeScene(index: number): void {
|
public changeScene(index: number): void {
|
||||||
this._sceneIndex = index;
|
this._sceneIndex = index;
|
||||||
|
@ -178,9 +181,9 @@ export class LAppLive2DManager {
|
||||||
LAppPal.printMessage(`[APP]model index: ${this._sceneIndex}`);
|
LAppPal.printMessage(`[APP]model index: ${this._sceneIndex}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ModelDir[]に保持したディレクトリ名から
|
// 根据在ModelDir[]中保存的目录名称
|
||||||
// model3.jsonのパスを決定する。
|
// 确定model3.json的路径。
|
||||||
// ディレクトリ名とmodel3.jsonの名前を一致させておくこと。
|
// 目录名称和model3.json的名称应保持一致。
|
||||||
const model: string = LAppDefine.ModelDir[index];
|
const model: string = LAppDefine.ModelDir[index];
|
||||||
const modelPath: string = LAppDefine.ResourcesPath + model + '/';
|
const modelPath: string = LAppDefine.ResourcesPath + model + '/';
|
||||||
let modelJsonName: string = LAppDefine.ModelDir[index];
|
let modelJsonName: string = LAppDefine.ModelDir[index];
|
||||||
|
@ -198,7 +201,7 @@ export class LAppLive2DManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* コンストラクタ
|
* 构造函数
|
||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
this._viewMatrix = new CubismMatrix44();
|
this._viewMatrix = new CubismMatrix44();
|
||||||
|
@ -207,10 +210,10 @@ export class LAppLive2DManager {
|
||||||
this.changeScene(this._sceneIndex);
|
this.changeScene(this._sceneIndex);
|
||||||
}
|
}
|
||||||
|
|
||||||
_viewMatrix: CubismMatrix44; // モデル描画に用いるview行列
|
_viewMatrix: CubismMatrix44; // 用于模型绘制的视图矩阵
|
||||||
_models: csmVector<LAppModel>; // モデルインスタンスのコンテナ
|
_models: csmVector<LAppModel>; // 模型实例的容器
|
||||||
_sceneIndex: number; // 表示するシーンのインデックス値
|
_sceneIndex: number; // 要显示的场景的索引值
|
||||||
// モーション再生終了のコールバック関数
|
// 动作播放结束的回调函数
|
||||||
_finishedMotion = (self: ACubismMotion): void => {
|
_finishedMotion = (self: ACubismMotion): void => {
|
||||||
LAppPal.printMessage('Motion Finished:');
|
LAppPal.printMessage('Motion Finished:');
|
||||||
console.log(self);
|
console.log(self);
|
||||||
|
|
|
@ -72,12 +72,12 @@ enum LoadStep {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ユーザーが実際に使用するモデルの実装クラス<br>
|
* 用户实际使用的模型实现类
|
||||||
* モデル生成、機能コンポーネント生成、更新処理とレンダリングの呼び出しを行う。
|
* 进行模型生成,功能组件生成,更新处理和渲染调用。
|
||||||
*/
|
*/
|
||||||
export class LAppModel extends CubismUserModel {
|
export class LAppModel extends CubismUserModel {
|
||||||
/**
|
/**
|
||||||
* model3.jsonが置かれたディレクトリとファイルパスからモデルを生成する
|
* 从位于目录和文件路径的model3.json生成模型
|
||||||
* @param dir
|
* @param dir
|
||||||
* @param fileName
|
* @param fileName
|
||||||
*/
|
*/
|
||||||
|
@ -92,19 +92,19 @@ export class LAppModel extends CubismUserModel {
|
||||||
arrayBuffer.byteLength
|
arrayBuffer.byteLength
|
||||||
);
|
);
|
||||||
|
|
||||||
// ステートを更新
|
// 更新状态
|
||||||
this._state = LoadStep.LoadModel;
|
this._state = LoadStep.LoadModel;
|
||||||
|
|
||||||
// 結果を保存
|
// 保存结果
|
||||||
this.setupModel(setting);
|
this.setupModel(setting);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* model3.jsonからモデルを生成する。
|
* 从model3.json生成模型。
|
||||||
* model3.jsonの記述に従ってモデル生成、モーション、物理演算などのコンポーネント生成を行う。
|
* 根据model3.json的描述生成模型,动作,物理运算等组件。
|
||||||
*
|
*
|
||||||
* @param setting ICubismModelSettingのインスタンス
|
* @param setting ICubismModelSetting的实例
|
||||||
*/
|
*/
|
||||||
private setupModel(setting: ICubismModelSetting): void {
|
private setupModel(setting: ICubismModelSetting): void {
|
||||||
this._updating = true;
|
this._updating = true;
|
||||||
|
@ -355,22 +355,22 @@ export class LAppModel extends CubismUserModel {
|
||||||
|
|
||||||
const motionGroupCount: number = this._modelSetting.getMotionGroupCount();
|
const motionGroupCount: number = this._modelSetting.getMotionGroupCount();
|
||||||
|
|
||||||
// モーションの総数を求める
|
// 计算动作总数
|
||||||
for (let i = 0; i < motionGroupCount; i++) {
|
for (let i = 0; i < motionGroupCount; i++) {
|
||||||
group[i] = this._modelSetting.getMotionGroupName(i);
|
group[i] = this._modelSetting.getMotionGroupName(i);
|
||||||
this._allMotionCount += this._modelSetting.getMotionCount(group[i]);
|
this._allMotionCount += this._modelSetting.getMotionCount(group[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// モーションの読み込み
|
// 加载动作
|
||||||
for (let i = 0; i < motionGroupCount; i++) {
|
for (let i = 0; i < motionGroupCount; i++) {
|
||||||
this.preLoadMotionGroup(group[i]);
|
this.preLoadMotionGroup(group[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// モーションがない場合
|
// 如果没有动作
|
||||||
if (motionGroupCount == 0) {
|
if (motionGroupCount == 0) {
|
||||||
this._state = LoadStep.LoadTexture;
|
this._state = LoadStep.LoadTexture;
|
||||||
|
|
||||||
// 全てのモーションを停止する
|
// 停止所有动作
|
||||||
this._motionManager.stopAllMotions();
|
this._motionManager.stopAllMotions();
|
||||||
|
|
||||||
this._updating = false;
|
this._updating = false;
|
||||||
|
@ -384,7 +384,7 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* テクスチャユニットにテクスチャをロードする
|
* 将纹理加载到纹理单元中
|
||||||
*/
|
*/
|
||||||
private setupTextures(): void {
|
private setupTextures(): void {
|
||||||
// iPhoneでのアルファ品質向上のためTypescriptではpremultipliedAlphaを採用
|
// iPhoneでのアルファ品質向上のためTypescriptではpremultipliedAlphaを採用
|
||||||
|
@ -434,7 +434,7 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* レンダラを再構築する
|
* 重建渲染器
|
||||||
*/
|
*/
|
||||||
public reloadRenderer(): void {
|
public reloadRenderer(): void {
|
||||||
this.deleteRenderer();
|
this.deleteRenderer();
|
||||||
|
@ -455,13 +455,13 @@ export class LAppModel extends CubismUserModel {
|
||||||
this._dragX = this._dragManager.getX();
|
this._dragX = this._dragManager.getX();
|
||||||
this._dragY = this._dragManager.getY();
|
this._dragY = this._dragManager.getY();
|
||||||
|
|
||||||
// モーションによるパラメータ更新の有無
|
// 参数更新是否由动作引起
|
||||||
let motionUpdated = false;
|
let motionUpdated = false;
|
||||||
|
|
||||||
//--------------------------------------------------------------------------
|
//--------------------------------------------------------------------------
|
||||||
this._model.loadParameters(); // 前回セーブされた状態をロード
|
this._model.loadParameters(); // 加载上一次保存的状态
|
||||||
if (this._motionManager.isFinished()) {
|
if (this._motionManager.isFinished()) {
|
||||||
// モーションの再生がない場合、待機モーションの中からランダムで再生する
|
// 如果没有动作播放,随机从待机动作中选择一个播放
|
||||||
this.startRandomMotion(
|
this.startRandomMotion(
|
||||||
LAppDefine.MotionGroupIdle,
|
LAppDefine.MotionGroupIdle,
|
||||||
LAppDefine.PriorityIdle
|
LAppDefine.PriorityIdle
|
||||||
|
@ -470,55 +470,55 @@ export class LAppModel extends CubismUserModel {
|
||||||
motionUpdated = this._motionManager.updateMotion(
|
motionUpdated = this._motionManager.updateMotion(
|
||||||
this._model,
|
this._model,
|
||||||
deltaTimeSeconds
|
deltaTimeSeconds
|
||||||
); // モーションを更新
|
); // 更新动作
|
||||||
}
|
}
|
||||||
this._model.saveParameters(); // 状態を保存
|
this._model.saveParameters(); // 保存状态
|
||||||
//--------------------------------------------------------------------------
|
//--------------------------------------------------------------------------
|
||||||
|
|
||||||
// まばたき
|
// 闪烁
|
||||||
if (!motionUpdated) {
|
if (!motionUpdated) {
|
||||||
if (this._eyeBlink != null) {
|
if (this._eyeBlink != null) {
|
||||||
// メインモーションの更新がないとき
|
// 当主要动作没有更新时
|
||||||
this._eyeBlink.updateParameters(this._model, deltaTimeSeconds); // 目パチ
|
this._eyeBlink.updateParameters(this._model, deltaTimeSeconds); // 眨眼
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._expressionManager != null) {
|
if (this._expressionManager != null) {
|
||||||
this._expressionManager.updateMotion(this._model, deltaTimeSeconds); // 表情でパラメータ更新(相対変化)
|
this._expressionManager.updateMotion(this._model, deltaTimeSeconds); // 通过表情更新参数(相对变化)
|
||||||
}
|
}
|
||||||
|
|
||||||
// ドラッグによる変化
|
// 由拖动引起的改变
|
||||||
// ドラッグによる顔の向きの調整
|
// 调整由拖动引起的脸部方向
|
||||||
this._model.addParameterValueById(this._idParamAngleX, this._dragX * 30); // -30から30の値を加える
|
this._model.addParameterValueById(this._idParamAngleX, this._dragX * 30); // 添加-30到30的值
|
||||||
this._model.addParameterValueById(this._idParamAngleY, this._dragY * 30);
|
this._model.addParameterValueById(this._idParamAngleY, this._dragY * 30);
|
||||||
this._model.addParameterValueById(
|
this._model.addParameterValueById(
|
||||||
this._idParamAngleZ,
|
this._idParamAngleZ,
|
||||||
this._dragX * this._dragY * -30
|
this._dragX * this._dragY * -30
|
||||||
);
|
);
|
||||||
|
|
||||||
// ドラッグによる体の向きの調整
|
// 调整由拖动引起的身体方向
|
||||||
this._model.addParameterValueById(
|
this._model.addParameterValueById(
|
||||||
this._idParamBodyAngleX,
|
this._idParamBodyAngleX,
|
||||||
this._dragX * 10
|
this._dragX * 10
|
||||||
); // -10から10の値を加える
|
); // 添加-10到10的值
|
||||||
|
|
||||||
// ドラッグによる目の向きの調整
|
// 调整由拖动引起的眼睛方向
|
||||||
this._model.addParameterValueById(this._idParamEyeBallX, this._dragX); // -1から1の値を加える
|
this._model.addParameterValueById(this._idParamEyeBallX, this._dragX); // 添加-1到1的值
|
||||||
this._model.addParameterValueById(this._idParamEyeBallY, this._dragY);
|
this._model.addParameterValueById(this._idParamEyeBallY, this._dragY);
|
||||||
|
|
||||||
// 呼吸など
|
// 呼吸等
|
||||||
if (this._breath != null) {
|
if (this._breath != null) {
|
||||||
this._breath.updateParameters(this._model, deltaTimeSeconds);
|
this._breath.updateParameters(this._model, deltaTimeSeconds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 物理演算の設定
|
// 设置物理运算
|
||||||
if (this._physics != null) {
|
if (this._physics != null) {
|
||||||
this._physics.evaluate(this._model, deltaTimeSeconds);
|
this._physics.evaluate(this._model, deltaTimeSeconds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// リップシンクの設定
|
// 设置唇形同步
|
||||||
if (this._lipsync) {
|
if (this._lipsync) {
|
||||||
let value = 0.0; // リアルタイムでリップシンクを行う場合、システムから音量を取得して、0~1の範囲で値を入力します。
|
let value = 0.0; // 如果要实时进行唇形同步,从系统中获取音量并输入0~1的范围内的值。
|
||||||
|
|
||||||
this._wavFileHandler.update(deltaTimeSeconds);
|
this._wavFileHandler.update(deltaTimeSeconds);
|
||||||
value = this._wavFileHandler.getRms();
|
value = this._wavFileHandler.getRms();
|
||||||
|
@ -528,7 +528,7 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ポーズの設定
|
// 设置姿势
|
||||||
if (this._pose != null) {
|
if (this._pose != null) {
|
||||||
this._pose.updateParameters(this._model, deltaTimeSeconds);
|
this._pose.updateParameters(this._model, deltaTimeSeconds);
|
||||||
}
|
}
|
||||||
|
@ -537,12 +537,12 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 引数で指定したモーションの再生を開始する
|
* 根据指定的动作组和优先级开始播放动作
|
||||||
* @param group モーショングループ名
|
* @param group 动作组名
|
||||||
* @param no グループ内の番号
|
* @param no 组内编号
|
||||||
* @param priority 優先度
|
* @param priority 优先级
|
||||||
* @param onFinishedMotionHandler モーション再生終了時に呼び出されるコールバック関数
|
* @param onFinishedMotionHandler 动作播放结束时调用的回调函数
|
||||||
* @return 開始したモーションの識別番号を返す。個別のモーションが終了したか否かを判定するisFinished()の引数で使用する。開始できない時は[-1]
|
* @return 开始的动作的识别号。通过isFinished()的参数判断个别动作是否结束。无法开始时为[-1]
|
||||||
*/
|
*/
|
||||||
public startMotion(
|
public startMotion(
|
||||||
group: string,
|
group: string,
|
||||||
|
@ -591,7 +591,7 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
motion.setEffectIds(this._eyeBlinkIds, this._lipSyncIds);
|
motion.setEffectIds(this._eyeBlinkIds, this._lipSyncIds);
|
||||||
autoDelete = true; // 終了時にメモリから削除
|
autoDelete = true; // 结束时从内存中删除
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
motion.setFinishedMotionHandler(onFinishedMotionHandler);
|
motion.setFinishedMotionHandler(onFinishedMotionHandler);
|
||||||
|
@ -616,11 +616,11 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ランダムに選ばれたモーションの再生を開始する。
|
* 开始播放随机选择的动作。
|
||||||
* @param group モーショングループ名
|
* @param group 动作组名
|
||||||
* @param priority 優先度
|
* @param priority 优先级
|
||||||
* @param onFinishedMotionHandler モーション再生終了時に呼び出されるコールバック関数
|
* @param onFinishedMotionHandler 动作播放结束时调用的回调函数
|
||||||
* @return 開始したモーションの識別番号を返す。個別のモーションが終了したか否かを判定するisFinished()の引数で使用する。開始できない時は[-1]
|
* @return 开始的动作的识别号。通过isFinished()的参数判断个别动作是否结束。无法开始时为[-1]
|
||||||
*/
|
*/
|
||||||
public startRandomMotion(
|
public startRandomMotion(
|
||||||
group: string,
|
group: string,
|
||||||
|
@ -639,9 +639,9 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 引数で指定した表情モーションをセットする
|
* 设置表情动作
|
||||||
*
|
*
|
||||||
* @param expressionId 表情モーションのID
|
* @param expressionId 表情动作的ID
|
||||||
*/
|
*/
|
||||||
public setExpression(expressionId: string): void {
|
public setExpression(expressionId: string): void {
|
||||||
const motion: ACubismMotion = this._expressions.getValue(expressionId);
|
const motion: ACubismMotion = this._expressions.getValue(expressionId);
|
||||||
|
@ -664,7 +664,7 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ランダムに選ばれた表情モーションをセットする
|
* 设置随机选择的表情动作
|
||||||
*/
|
*/
|
||||||
public setRandomExpression(): void {
|
public setRandomExpression(): void {
|
||||||
if (this._expressions.getSize() == 0) {
|
if (this._expressions.getSize() == 0) {
|
||||||
|
@ -683,22 +683,22 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* イベントの発火を受け取る
|
* 接收事件的发生
|
||||||
*/
|
*/
|
||||||
public motionEventFired(eventValue: csmString): void {
|
public motionEventFired(eventValue: csmString): void {
|
||||||
CubismLogInfo('{0} is fired on LAppModel!!', eventValue.s);
|
CubismLogInfo('{0} is fired on LAppModel!!', eventValue.s);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 当たり判定テスト
|
* 碰撞检测测试
|
||||||
* 指定IDの頂点リストから矩形を計算し、座標をが矩形範囲内か判定する。
|
* 从指定ID的顶点列表中计算矩形,判断坐标是否在矩形范围内。
|
||||||
*
|
*
|
||||||
* @param hitArenaName 当たり判定をテストする対象のID
|
* @param hitArenaName 要测试的碰撞检测的目标的ID
|
||||||
* @param x 判定を行うX座標
|
* @param x 进行判断的X坐标
|
||||||
* @param y 判定を行うY座標
|
* @param y 进行判断的Y坐标
|
||||||
*/
|
*/
|
||||||
public hitTest(hitArenaName: string, x: number, y: number): boolean {
|
public hitTest(hitArenaName: string, x: number, y: number): boolean {
|
||||||
// 透明時は当たり判定無し。
|
// 透明时无碰撞检测。
|
||||||
if (this._opacity < 1) {
|
if (this._opacity < 1) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -716,10 +716,10 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* モーションデータをグループ名から一括でロードする。
|
* 将动作数据一次性加载到组名中。
|
||||||
* モーションデータの名前は内部でModelSettingから取得する。
|
* 动作数据的名字是从ModelSetting中内部获取的。
|
||||||
*
|
*
|
||||||
* @param group モーションデータのグループ名
|
* @param group 动作数据的组名
|
||||||
*/
|
*/
|
||||||
public preLoadMotionGroup(group: string): void {
|
public preLoadMotionGroup(group: string): void {
|
||||||
for (let i = 0; i < this._modelSetting.getMotionCount(group); i++) {
|
for (let i = 0; i < this._modelSetting.getMotionCount(group); i++) {
|
||||||
|
@ -763,7 +763,7 @@ export class LAppModel extends CubismUserModel {
|
||||||
if (this._motionCount >= this._allMotionCount) {
|
if (this._motionCount >= this._allMotionCount) {
|
||||||
this._state = LoadStep.LoadTexture;
|
this._state = LoadStep.LoadTexture;
|
||||||
|
|
||||||
// 全てのモーションを停止する
|
// 停止所有动作
|
||||||
this._motionManager.stopAllMotions();
|
this._motionManager.stopAllMotions();
|
||||||
|
|
||||||
this._updating = false;
|
this._updating = false;
|
||||||
|
@ -778,26 +778,26 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* すべてのモーションデータを解放する。
|
* 释放所有的动作数据。
|
||||||
*/
|
*/
|
||||||
public releaseMotions(): void {
|
public releaseMotions(): void {
|
||||||
this._motions.clear();
|
this._motions.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 全ての表情データを解放する。
|
* 释放所有的表情数据。
|
||||||
*/
|
*/
|
||||||
public releaseExpressions(): void {
|
public releaseExpressions(): void {
|
||||||
this._expressions.clear();
|
this._expressions.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* モデルを描画する処理。モデルを描画する空間のView-Projection行列を渡す。
|
* 渲染模型的处理。传递渲染模型的空间的View-Projection矩阵。
|
||||||
*/
|
*/
|
||||||
public doDraw(): void {
|
public doDraw(): void {
|
||||||
if (this._model == null) return;
|
if (this._model == null) return;
|
||||||
|
|
||||||
// キャンバスサイズを渡す
|
// 传递画布大小
|
||||||
const viewport: number[] = [0, 0, canvas.width, canvas.height];
|
const viewport: number[] = [0, 0, canvas.width, canvas.height];
|
||||||
|
|
||||||
this.getRenderer().setRenderState(frameBuffer, viewport);
|
this.getRenderer().setRenderState(frameBuffer, viewport);
|
||||||
|
@ -805,14 +805,14 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* モデルを描画する処理。モデルを描画する空間のView-Projection行列を渡す。
|
* 渲染模型的处理。传递渲染模型的空间的View-Projection矩阵。
|
||||||
*/
|
*/
|
||||||
public draw(matrix: CubismMatrix44): void {
|
public draw(matrix: CubismMatrix44): void {
|
||||||
if (this._model == null) {
|
if (this._model == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 各読み込み終了後
|
// 各读取完成后
|
||||||
if (this._state == LoadStep.CompleteSetup) {
|
if (this._state == LoadStep.CompleteSetup) {
|
||||||
matrix.multiplyByMatrix(this._modelMatrix);
|
matrix.multiplyByMatrix(this._modelMatrix);
|
||||||
|
|
||||||
|
@ -847,7 +847,7 @@ export class LAppModel extends CubismUserModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* コンストラクタ
|
* 构造函数
|
||||||
*/
|
*/
|
||||||
public constructor() {
|
public constructor() {
|
||||||
super();
|
super();
|
||||||
|
@ -856,11 +856,11 @@ export class LAppModel extends CubismUserModel {
|
||||||
this._modelHomeDir = null;
|
this._modelHomeDir = null;
|
||||||
this._userTimeSeconds = 0.0;
|
this._userTimeSeconds = 0.0;
|
||||||
|
|
||||||
this._eyeBlinkIds = new csmVector<CubismIdHandle>();
|
this._eyeBlinkIds = new csmVector<CubismIdHandle>(); // 模型设置的眨眼功能参数ID
|
||||||
this._lipSyncIds = new csmVector<CubismIdHandle>();
|
this._lipSyncIds = new csmVector<CubismIdHandle>(); // 模型设置的唇形同步功能参数ID
|
||||||
|
|
||||||
this._motions = new csmMap<string, ACubismMotion>();
|
this._motions = new csmMap<string, ACubismMotion>(); // 已加载的动作列表
|
||||||
this._expressions = new csmMap<string, ACubismMotion>();
|
this._expressions = new csmMap<string, ACubismMotion>(); // 已加载的表情列表
|
||||||
|
|
||||||
this._hitArea = new csmVector<csmRect>();
|
this._hitArea = new csmVector<csmRect>();
|
||||||
this._userArea = new csmVector<csmRect>();
|
this._userArea = new csmVector<csmRect>();
|
||||||
|
@ -897,31 +897,31 @@ export class LAppModel extends CubismUserModel {
|
||||||
this._consistency = false;
|
this._consistency = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
_modelSetting: ICubismModelSetting; // モデルセッティング情報
|
_modelSetting: ICubismModelSetting; // 模型设置信息
|
||||||
_modelHomeDir: string; // モデルセッティングが置かれたディレクトリ
|
_modelHomeDir: string; // 放置模型设置的目录
|
||||||
_userTimeSeconds: number; // デルタ時間の積算値[秒]
|
_userTimeSeconds: number; // 时间增量的累积值[秒]
|
||||||
|
|
||||||
_eyeBlinkIds: csmVector<CubismIdHandle>; // モデルに設定された瞬き機能用パラメータID
|
_eyeBlinkIds: csmVector<CubismIdHandle>; // 模型设定的眨眼功能参数ID
|
||||||
_lipSyncIds: csmVector<CubismIdHandle>; // モデルに設定されたリップシンク機能用パラメータID
|
_lipSyncIds: csmVector<CubismIdHandle>; // 模型设定的唇形同步功能参数ID
|
||||||
|
|
||||||
_motions: csmMap<string, ACubismMotion>; // 読み込まれているモーションのリスト
|
_motions: csmMap<string, ACubismMotion>; // 已加载的动作列表
|
||||||
_expressions: csmMap<string, ACubismMotion>; // 読み込まれている表情のリスト
|
_expressions: csmMap<string, ACubismMotion>; // 已加载的表情列表
|
||||||
|
|
||||||
_hitArea: csmVector<csmRect>;
|
_hitArea: csmVector<csmRect>;
|
||||||
_userArea: csmVector<csmRect>;
|
_userArea: csmVector<csmRect>;
|
||||||
|
|
||||||
_idParamAngleX: CubismIdHandle; // パラメータID: ParamAngleX
|
_idParamAngleX: CubismIdHandle; // 参数ID: ParamAngleX
|
||||||
_idParamAngleY: CubismIdHandle; // パラメータID: ParamAngleY
|
_idParamAngleY: CubismIdHandle; // 参数ID: ParamAngleY
|
||||||
_idParamAngleZ: CubismIdHandle; // パラメータID: ParamAngleZ
|
_idParamAngleZ: CubismIdHandle; // 参数ID: ParamAngleZ
|
||||||
_idParamEyeBallX: CubismIdHandle; // パラメータID: ParamEyeBallX
|
_idParamEyeBallX: CubismIdHandle; // 参数ID: ParamEyeBallX
|
||||||
_idParamEyeBallY: CubismIdHandle; // パラメータID: ParamEyeBAllY
|
_idParamEyeBallY: CubismIdHandle; // 参数ID: ParamEyeBAllY
|
||||||
_idParamBodyAngleX: CubismIdHandle; // パラメータID: ParamBodyAngleX
|
_idParamBodyAngleX: CubismIdHandle; // 参数ID: ParamBodyAngleX
|
||||||
|
|
||||||
_state: LoadStep; // 現在のステータス管理用
|
_state: LoadStep; // 当前的状态管理用
|
||||||
_expressionCount: number; // 表情データカウント
|
_expressionCount: number; // 表情数据计数
|
||||||
_textureCount: number; // テクスチャカウント
|
_textureCount: number; // 纹理计数
|
||||||
_motionCount: number; // モーションデータカウント
|
_motionCount: number; // 动作数据计数
|
||||||
_allMotionCount: number; // モーション総数
|
_allMotionCount: number; // 动作总数
|
||||||
_wavFileHandler: LAppWavFileHandler; //wavファイルハンドラ
|
_wavFileHandler: LAppWavFileHandler; //wav文件处理器
|
||||||
_consistency: boolean; // MOC3一貫性チェック管理用
|
_consistency: boolean; // MOC3一致性检查管理用
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,19 +6,19 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* プラットフォーム依存機能を抽象化する Cubism Platform Abstraction Layer.
|
* Cubism Platform Abstraction Layer 用于抽象化平台依赖功能.
|
||||||
*
|
*
|
||||||
* ファイル読み込みや時刻取得等のプラットフォームに依存する関数をまとめる。
|
* 整合了文件读取、获取时间等与平台有关的函数.
|
||||||
*/
|
*/
|
||||||
export class LAppPal {
|
export class LAppPal {
|
||||||
/**
|
/**
|
||||||
* ファイルをバイトデータとして読みこむ
|
* 以字节数据的形式读取文件
|
||||||
*
|
*
|
||||||
* @param filePath 読み込み対象ファイルのパス
|
* @param filePath 需要读取的文件的路径
|
||||||
* @return
|
* @return
|
||||||
* {
|
* {
|
||||||
* buffer, 読み込んだバイトデータ
|
* buffer, 读取的字节数据
|
||||||
* size ファイルサイズ
|
* size 文件大小
|
||||||
* }
|
* }
|
||||||
*/
|
*/
|
||||||
public static loadFileAsBytes(
|
public static loadFileAsBytes(
|
||||||
|
@ -31,8 +31,8 @@ export class LAppPal {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* デルタ時間(前回フレームとの差分)を取得する
|
* 获取增量时间(与上一帧的差值)
|
||||||
* @return デルタ時間[ms]
|
* @return 增量时间[ms]
|
||||||
*/
|
*/
|
||||||
public static getDeltaTime(): number {
|
public static getDeltaTime(): number {
|
||||||
return this.s_deltaTime;
|
return this.s_deltaTime;
|
||||||
|
@ -45,8 +45,8 @@ export class LAppPal {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* メッセージを出力する
|
* 输出消息
|
||||||
* @param message 文字列
|
* @param message 字符串
|
||||||
*/
|
*/
|
||||||
public static printMessage(message: string): void {
|
public static printMessage(message: string): void {
|
||||||
console.log(message);
|
console.log(message);
|
||||||
|
|
|
@ -8,18 +8,18 @@
|
||||||
import { canvas, gl } from './lappdelegate';
|
import { canvas, gl } from './lappdelegate';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* スプライトを実装するクラス
|
* 实现精灵的类
|
||||||
*
|
*
|
||||||
* テクスチャID、Rectの管理
|
* 管理纹理ID,Rect
|
||||||
*/
|
*/
|
||||||
export class LAppSprite {
|
export class LAppSprite {
|
||||||
/**
|
/**
|
||||||
* コンストラクタ
|
* 构造函数
|
||||||
* @param x x座標
|
* @param x x坐标
|
||||||
* @param y y座標
|
* @param y y坐标
|
||||||
* @param width 横幅
|
* @param width 宽度
|
||||||
* @param height 高さ
|
* @param height 高度
|
||||||
* @param textureId テクスチャ
|
* @param textureId 纹理
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
x: number,
|
x: number,
|
||||||
|
@ -50,7 +50,7 @@ export class LAppSprite {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解放する。
|
* 释放资源。
|
||||||
*/
|
*/
|
||||||
public release(): void {
|
public release(): void {
|
||||||
this._rect = null;
|
this._rect = null;
|
||||||
|
@ -69,54 +69,54 @@ export class LAppSprite {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* テクスチャを返す
|
* 返回纹理
|
||||||
*/
|
*/
|
||||||
public getTexture(): WebGLTexture {
|
public getTexture(): WebGLTexture {
|
||||||
return this._texture;
|
return this._texture;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 描画する。
|
* 进行绘制。
|
||||||
* @param programId シェーダープログラム
|
* @param programId 着色程序
|
||||||
* @param canvas 描画するキャンパス情報
|
* @param canvas 需要绘制的画布信息
|
||||||
*/
|
*/
|
||||||
public render(programId: WebGLProgram): void {
|
public render(programId: WebGLProgram): void {
|
||||||
if (this._texture == null) {
|
if (this._texture == null) {
|
||||||
// ロードが完了していない
|
// 加载未完成
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初回描画時
|
// 首次绘制
|
||||||
if (this._firstDraw) {
|
if (this._firstDraw) {
|
||||||
// 何番目のattribute変数か取得
|
// 获取attribute变量的索引
|
||||||
this._positionLocation = gl.getAttribLocation(programId, 'position');
|
this._positionLocation = gl.getAttribLocation(programId, 'position');
|
||||||
gl.enableVertexAttribArray(this._positionLocation);
|
gl.enableVertexAttribArray(this._positionLocation);
|
||||||
|
|
||||||
this._uvLocation = gl.getAttribLocation(programId, 'uv');
|
this._uvLocation = gl.getAttribLocation(programId, 'uv');
|
||||||
gl.enableVertexAttribArray(this._uvLocation);
|
gl.enableVertexAttribArray(this._uvLocation);
|
||||||
|
|
||||||
// 何番目のuniform変数か取得
|
// 获取uniform变量的索引
|
||||||
this._textureLocation = gl.getUniformLocation(programId, 'texture');
|
this._textureLocation = gl.getUniformLocation(programId, 'texture');
|
||||||
|
|
||||||
// uniform属性の登録
|
// 注册uniform属性
|
||||||
gl.uniform1i(this._textureLocation, 0);
|
gl.uniform1i(this._textureLocation, 0);
|
||||||
|
|
||||||
// uvバッファ、座標初期化
|
// uv缓冲,坐标初始化
|
||||||
{
|
{
|
||||||
this._uvArray = new Float32Array([
|
this._uvArray = new Float32Array([
|
||||||
1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0
|
1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// uvバッファを作成
|
// 创建uv缓冲
|
||||||
this._uvBuffer = gl.createBuffer();
|
this._uvBuffer = gl.createBuffer();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 頂点バッファ、座標初期化
|
// 顶点缓冲,坐标初始化
|
||||||
{
|
{
|
||||||
const maxWidth = canvas.width;
|
const maxWidth = canvas.width;
|
||||||
const maxHeight = canvas.height;
|
const maxHeight = canvas.height;
|
||||||
|
|
||||||
// 頂点データ
|
// 顶点数据
|
||||||
this._positionArray = new Float32Array([
|
this._positionArray = new Float32Array([
|
||||||
(this._rect.right - maxWidth * 0.5) / (maxWidth * 0.5),
|
(this._rect.right - maxWidth * 0.5) / (maxWidth * 0.5),
|
||||||
(this._rect.up - maxHeight * 0.5) / (maxHeight * 0.5),
|
(this._rect.up - maxHeight * 0.5) / (maxHeight * 0.5),
|
||||||
|
@ -128,41 +128,41 @@ export class LAppSprite {
|
||||||
(this._rect.down - maxHeight * 0.5) / (maxHeight * 0.5)
|
(this._rect.down - maxHeight * 0.5) / (maxHeight * 0.5)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 頂点バッファを作成
|
// 创建顶点缓冲
|
||||||
this._vertexBuffer = gl.createBuffer();
|
this._vertexBuffer = gl.createBuffer();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 頂点インデックスバッファ、初期化
|
// 顶点索引缓冲,初始化
|
||||||
{
|
{
|
||||||
// インデックスデータ
|
// 索引数据
|
||||||
this._indexArray = new Uint16Array([0, 1, 2, 3, 2, 0]);
|
this._indexArray = new Uint16Array([0, 1, 2, 3, 2, 0]);
|
||||||
|
|
||||||
// インデックスバッファを作成
|
// 创建索引缓冲
|
||||||
this._indexBuffer = gl.createBuffer();
|
this._indexBuffer = gl.createBuffer();
|
||||||
}
|
}
|
||||||
|
|
||||||
this._firstDraw = false;
|
this._firstDraw = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// UV座標登録
|
// 注册UV坐标
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, this._uvArray, gl.STATIC_DRAW);
|
gl.bufferData(gl.ARRAY_BUFFER, this._uvArray, gl.STATIC_DRAW);
|
||||||
|
|
||||||
// attribute属性を登録
|
// 注册attribute属性
|
||||||
gl.vertexAttribPointer(this._uvLocation, 2, gl.FLOAT, false, 0, 0);
|
gl.vertexAttribPointer(this._uvLocation, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
|
||||||
// 頂点座標を登録
|
// 注册顶点坐标
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer);
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, this._positionArray, gl.STATIC_DRAW);
|
gl.bufferData(gl.ARRAY_BUFFER, this._positionArray, gl.STATIC_DRAW);
|
||||||
|
|
||||||
// attribute属性を登録
|
// 注册attribute属性
|
||||||
gl.vertexAttribPointer(this._positionLocation, 2, gl.FLOAT, false, 0, 0);
|
gl.vertexAttribPointer(this._positionLocation, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
|
||||||
// 頂点インデックスを作成
|
// 创建顶点索引
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
|
||||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indexArray, gl.DYNAMIC_DRAW);
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indexArray, gl.DYNAMIC_DRAW);
|
||||||
|
|
||||||
// モデルの描画
|
// 绘制模型
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this._texture);
|
gl.bindTexture(gl.TEXTURE_2D, this._texture);
|
||||||
gl.drawElements(
|
gl.drawElements(
|
||||||
gl.TRIANGLES,
|
gl.TRIANGLES,
|
||||||
|
@ -173,15 +173,15 @@ export class LAppSprite {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 当たり判定
|
* 碰撞检测
|
||||||
* @param pointX x座標
|
* @param pointX x坐标
|
||||||
* @param pointY y座標
|
* @param pointY y坐标
|
||||||
*/
|
*/
|
||||||
public isHit(pointX: number, pointY: number): boolean {
|
public isHit(pointX: number, pointY: number): boolean {
|
||||||
// 画面サイズを取得する。
|
// 获取屏幕大小。
|
||||||
const { height } = canvas;
|
const { height } = canvas;
|
||||||
|
|
||||||
// Y座標は変換する必要あり
|
// Y坐标需要转换
|
||||||
const y = height - pointY;
|
const y = height - pointY;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -192,10 +192,10 @@ export class LAppSprite {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
_texture: WebGLTexture; // テクスチャ
|
_texture: WebGLTexture; // 纹理
|
||||||
_vertexBuffer: WebGLBuffer; // 頂点バッファ
|
_vertexBuffer: WebGLBuffer; // 顶点缓冲
|
||||||
_uvBuffer: WebGLBuffer; // uv頂点バッファ
|
_uvBuffer: WebGLBuffer; // uv顶点缓冲
|
||||||
_indexBuffer: WebGLBuffer; // 頂点インデックスバッファ
|
_indexBuffer: WebGLBuffer; // 顶点索引缓冲
|
||||||
_rect: Rect; // 矩形
|
_rect: Rect; // 矩形
|
||||||
|
|
||||||
_positionLocation: number;
|
_positionLocation: number;
|
||||||
|
@ -210,8 +210,8 @@ export class LAppSprite {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Rect {
|
export class Rect {
|
||||||
public left: number; // 左辺
|
public left: number; // 左边
|
||||||
public right: number; // 右辺
|
public right: number; // 右边
|
||||||
public up: number; // 上辺
|
public up: number; // 上边
|
||||||
public down: number; // 下辺
|
public down: number; // 下边
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,19 +10,19 @@ import { csmVector, iterator } from '@framework/type/csmvector';
|
||||||
import { gl } from './lappdelegate';
|
import { gl } from './lappdelegate';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* テクスチャ管理クラス
|
* 纹理管理类
|
||||||
* 画像読み込み、管理を行うクラス。
|
* 进行图片读取、管理的类。
|
||||||
*/
|
*/
|
||||||
export class LAppTextureManager {
|
export class LAppTextureManager {
|
||||||
/**
|
/**
|
||||||
* コンストラクタ
|
* 构造函数
|
||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
this._textures = new csmVector<TextureInfo>();
|
this._textures = new csmVector<TextureInfo>();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解放する。
|
* 释放资源。
|
||||||
*/
|
*/
|
||||||
public release(): void {
|
public release(): void {
|
||||||
for (
|
for (
|
||||||
|
@ -36,18 +36,18 @@ export class LAppTextureManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画像読み込み
|
* 图片读取
|
||||||
*
|
*
|
||||||
* @param fileName 読み込む画像ファイルパス名
|
* @param fileName 读取图片文件路径名
|
||||||
* @param usePremultiply Premult処理を有効にするか
|
* @param usePremultiply 是否启用 Premult 处理
|
||||||
* @return 画像情報、読み込み失敗時はnullを返す
|
* @return 图片信息,读取失败时返回 null
|
||||||
*/
|
*/
|
||||||
public createTextureFromPngFile(
|
public createTextureFromPngFile(
|
||||||
fileName: string,
|
fileName: string,
|
||||||
usePremultiply: boolean,
|
usePremultiply: boolean,
|
||||||
callback: (textureInfo: TextureInfo) => void
|
callback: (textureInfo: TextureInfo) => void
|
||||||
): void {
|
): void {
|
||||||
// search loaded texture already
|
// 搜索已加载的纹理
|
||||||
for (
|
for (
|
||||||
let ite: iterator<TextureInfo> = this._textures.begin();
|
let ite: iterator<TextureInfo> = this._textures.begin();
|
||||||
ite.notEqual(this._textures.end());
|
ite.notEqual(this._textures.end());
|
||||||
|
@ -57,9 +57,9 @@ export class LAppTextureManager {
|
||||||
ite.ptr().fileName == fileName &&
|
ite.ptr().fileName == fileName &&
|
||||||
ite.ptr().usePremultply == usePremultiply
|
ite.ptr().usePremultply == usePremultiply
|
||||||
) {
|
) {
|
||||||
// 2回目以降はキャッシュが使用される(待ち時間なし)
|
// 第二次及以后使用缓存(无等待时间)
|
||||||
// WebKitでは同じImageのonloadを再度呼ぶには再インスタンスが必要
|
// 在 WebKit 中,需要重新实例化 Image 才能再次调用相同的 onload
|
||||||
// 詳細:https://stackoverflow.com/a/5024181
|
// 详情:https://stackoverflow.com/a/5024181
|
||||||
ite.ptr().img = new Image();
|
ite.ptr().img = new Image();
|
||||||
ite
|
ite
|
||||||
.ptr()
|
.ptr()
|
||||||
|
@ -71,18 +71,18 @@ export class LAppTextureManager {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// データのオンロードをトリガーにする
|
// 以数据加载为触发器
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.addEventListener(
|
img.addEventListener(
|
||||||
'load',
|
'load',
|
||||||
(): void => {
|
(): void => {
|
||||||
// テクスチャオブジェクトの作成
|
// 创建纹理对象
|
||||||
const tex: WebGLTexture = gl.createTexture();
|
const tex: WebGLTexture = gl.createTexture();
|
||||||
|
|
||||||
// テクスチャを選択
|
// 选择纹理
|
||||||
gl.bindTexture(gl.TEXTURE_2D, tex);
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||||
|
|
||||||
// テクスチャにピクセルを書き込む
|
// 将像素写入纹理
|
||||||
gl.texParameteri(
|
gl.texParameteri(
|
||||||
gl.TEXTURE_2D,
|
gl.TEXTURE_2D,
|
||||||
gl.TEXTURE_MIN_FILTER,
|
gl.TEXTURE_MIN_FILTER,
|
||||||
|
@ -90,12 +90,12 @@ export class LAppTextureManager {
|
||||||
);
|
);
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||||
|
|
||||||
// Premult処理を行わせる
|
// 启用 Premult 处理
|
||||||
if (usePremultiply) {
|
if (usePremultiply) {
|
||||||
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// テクスチャにピクセルを書き込む
|
// 将像素写入纹理
|
||||||
gl.texImage2D(
|
gl.texImage2D(
|
||||||
gl.TEXTURE_2D,
|
gl.TEXTURE_2D,
|
||||||
0,
|
0,
|
||||||
|
@ -105,10 +105,10 @@ export class LAppTextureManager {
|
||||||
img
|
img
|
||||||
);
|
);
|
||||||
|
|
||||||
// ミップマップを生成
|
// 生成 Mipmap
|
||||||
gl.generateMipmap(gl.TEXTURE_2D);
|
gl.generateMipmap(gl.TEXTURE_2D);
|
||||||
|
|
||||||
// テクスチャをバインド
|
// 绑定纹理
|
||||||
gl.bindTexture(gl.TEXTURE_2D, null);
|
gl.bindTexture(gl.TEXTURE_2D, null);
|
||||||
|
|
||||||
const textureInfo: TextureInfo = new TextureInfo();
|
const textureInfo: TextureInfo = new TextureInfo();
|
||||||
|
@ -130,9 +130,9 @@ export class LAppTextureManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画像の解放
|
* 图片的释放
|
||||||
*
|
*
|
||||||
* 配列に存在する画像全てを解放する。
|
* 释放存在于数组中的所有图片。
|
||||||
*/
|
*/
|
||||||
public releaseTextures(): void {
|
public releaseTextures(): void {
|
||||||
for (let i = 0; i < this._textures.getSize(); i++) {
|
for (let i = 0; i < this._textures.getSize(); i++) {
|
||||||
|
@ -143,10 +143,10 @@ export class LAppTextureManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画像の解放
|
* 图片的释放
|
||||||
*
|
*
|
||||||
* 指定したテクスチャの画像を解放する。
|
* 释放指定的纹理图片。
|
||||||
* @param texture 解放するテクスチャ
|
* @param texture 需要释放的纹理
|
||||||
*/
|
*/
|
||||||
public releaseTextureByTexture(texture: WebGLTexture): void {
|
public releaseTextureByTexture(texture: WebGLTexture): void {
|
||||||
for (let i = 0; i < this._textures.getSize(); i++) {
|
for (let i = 0; i < this._textures.getSize(); i++) {
|
||||||
|
@ -161,10 +161,10 @@ export class LAppTextureManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画像の解放
|
* 图片的释放
|
||||||
*
|
*
|
||||||
* 指定した名前の画像を解放する。
|
* 释放指定名称的图片。
|
||||||
* @param fileName 解放する画像ファイルパス名
|
* @param fileName 需要释放的图片文件路径名
|
||||||
*/
|
*/
|
||||||
public releaseTextureByFilePath(fileName: string): void {
|
public releaseTextureByFilePath(fileName: string): void {
|
||||||
for (let i = 0; i < this._textures.getSize(); i++) {
|
for (let i = 0; i < this._textures.getSize(); i++) {
|
||||||
|
@ -180,13 +180,13 @@ export class LAppTextureManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画像情報構造体
|
* 图片信息结构体
|
||||||
*/
|
*/
|
||||||
export class TextureInfo {
|
export class TextureInfo {
|
||||||
img: HTMLImageElement; // 画像
|
img: HTMLImageElement; // 图片
|
||||||
id: WebGLTexture = null; // テクスチャ
|
id: WebGLTexture = null; // 纹理
|
||||||
width = 0; // 横幅
|
width = 0; // 宽度
|
||||||
height = 0; // 高さ
|
height = 0; // 高度
|
||||||
usePremultply: boolean; // Premult処理を有効にするか
|
usePremultply: boolean; // 是否启用 Premult 处理
|
||||||
fileName: string; // ファイル名
|
fileName: string; // 文件名
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,29 +17,29 @@ import { TextureInfo } from './lapptexturemanager';
|
||||||
import { TouchManager } from './touchmanager';
|
import { TouchManager } from './touchmanager';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 描画クラス。
|
* 渲染类。
|
||||||
*/
|
*/
|
||||||
export class LAppView {
|
export class LAppView {
|
||||||
/**
|
/**
|
||||||
* コンストラクタ
|
* 构造函数
|
||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
this._programId = null;
|
this._programId = null;
|
||||||
this._back = null;
|
this._back = null;
|
||||||
this._gear = null;
|
this._gear = null;
|
||||||
|
|
||||||
// タッチ関係のイベント管理
|
// 触摸相关事件管理
|
||||||
this._touchManager = new TouchManager();
|
this._touchManager = new TouchManager();
|
||||||
|
|
||||||
// デバイス座標からスクリーン座標に変換するための
|
// 从设备坐标到屏幕坐标的转换矩阵
|
||||||
this._deviceToScreen = new CubismMatrix44();
|
this._deviceToScreen = new CubismMatrix44();
|
||||||
|
|
||||||
// 画面の表示の拡大縮小や移動の変換を行う行列
|
// 屏幕显示的缩放和移动转换矩阵
|
||||||
this._viewMatrix = new CubismViewMatrix();
|
this._viewMatrix = new CubismViewMatrix();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 初期化する。
|
* 初始化。
|
||||||
*/
|
*/
|
||||||
public initialize(): void {
|
public initialize(): void {
|
||||||
const { width, height } = canvas;
|
const { width, height } = canvas;
|
||||||
|
@ -50,7 +50,7 @@ export class LAppView {
|
||||||
const bottom: number = LAppDefine.ViewLogicalLeft;
|
const bottom: number = LAppDefine.ViewLogicalLeft;
|
||||||
const top: number = LAppDefine.ViewLogicalRight;
|
const top: number = LAppDefine.ViewLogicalRight;
|
||||||
|
|
||||||
this._viewMatrix.setScreenRect(left, right, bottom, top); // デバイスに対応する画面の範囲。 Xの左端、Xの右端、Yの下端、Yの上端
|
this._viewMatrix.setScreenRect(left, right, bottom, top); // 设备对应的屏幕范围。 X的左端,X的右端,Y的下端,Y的上端
|
||||||
this._viewMatrix.scale(LAppDefine.ViewScale, LAppDefine.ViewScale);
|
this._viewMatrix.scale(LAppDefine.ViewScale, LAppDefine.ViewScale);
|
||||||
|
|
||||||
this._deviceToScreen.loadIdentity();
|
this._deviceToScreen.loadIdentity();
|
||||||
|
@ -63,11 +63,11 @@ export class LAppView {
|
||||||
}
|
}
|
||||||
this._deviceToScreen.translateRelative(-width * 0.5, -height * 0.5);
|
this._deviceToScreen.translateRelative(-width * 0.5, -height * 0.5);
|
||||||
|
|
||||||
// 表示範囲の設定
|
// 设置显示范围
|
||||||
this._viewMatrix.setMaxScale(LAppDefine.ViewMaxScale); // 限界拡張率
|
this._viewMatrix.setMaxScale(LAppDefine.ViewMaxScale); // 最大扩展率
|
||||||
this._viewMatrix.setMinScale(LAppDefine.ViewMinScale); // 限界縮小率
|
this._viewMatrix.setMinScale(LAppDefine.ViewMinScale); // 最大缩小率
|
||||||
|
|
||||||
// 表示できる最大範囲
|
// 可显示的最大范围
|
||||||
this._viewMatrix.setMaxScreenRect(
|
this._viewMatrix.setMaxScreenRect(
|
||||||
LAppDefine.ViewLogicalMaxLeft,
|
LAppDefine.ViewLogicalMaxLeft,
|
||||||
LAppDefine.ViewLogicalMaxRight,
|
LAppDefine.ViewLogicalMaxRight,
|
||||||
|
@ -77,7 +77,7 @@ export class LAppView {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解放する
|
* 释放资源
|
||||||
*/
|
*/
|
||||||
public release(): void {
|
public release(): void {
|
||||||
this._viewMatrix = null;
|
this._viewMatrix = null;
|
||||||
|
@ -95,7 +95,7 @@ export class LAppView {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 描画する。
|
* 进行渲染。
|
||||||
*/
|
*/
|
||||||
public render(): void {
|
public render(): void {
|
||||||
gl.useProgram(this._programId);
|
gl.useProgram(this._programId);
|
||||||
|
@ -117,7 +117,7 @@ export class LAppView {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 画像の初期化を行う。
|
* 进行图片初始化。
|
||||||
*/
|
*/
|
||||||
public initializeSprite(): void {
|
public initializeSprite(): void {
|
||||||
const width: number = canvas.width;
|
const width: number = canvas.width;
|
||||||
|
@ -128,10 +128,10 @@ export class LAppView {
|
||||||
|
|
||||||
let imageName = '';
|
let imageName = '';
|
||||||
|
|
||||||
// 背景画像初期化
|
// 背景图片初始化
|
||||||
imageName = LAppDefine.BackImageName;
|
imageName = LAppDefine.BackImageName;
|
||||||
|
|
||||||
// 非同期なのでコールバック関数を作成
|
// 因为是异步的所以创建回调函数
|
||||||
const initBackGroundTexture = (textureInfo: TextureInfo): void => {
|
const initBackGroundTexture = (textureInfo: TextureInfo): void => {
|
||||||
const x: number = width * 0.5;
|
const x: number = width * 0.5;
|
||||||
const y: number = height * 0.5;
|
const y: number = height * 0.5;
|
||||||
|
@ -147,7 +147,7 @@ export class LAppView {
|
||||||
initBackGroundTexture
|
initBackGroundTexture
|
||||||
);
|
);
|
||||||
|
|
||||||
// 歯車画像初期化
|
// 齿轮图片初始化
|
||||||
imageName = LAppDefine.GearImageName;
|
imageName = LAppDefine.GearImageName;
|
||||||
const initGearTexture = (textureInfo: TextureInfo): void => {
|
const initGearTexture = (textureInfo: TextureInfo): void => {
|
||||||
const x = width - textureInfo.width * 0.5;
|
const x = width - textureInfo.width * 0.5;
|
||||||
|
@ -163,17 +163,17 @@ export class LAppView {
|
||||||
initGearTexture
|
initGearTexture
|
||||||
);
|
);
|
||||||
|
|
||||||
// シェーダーを作成
|
// 创建着色器
|
||||||
if (this._programId == null) {
|
if (this._programId == null) {
|
||||||
this._programId = LAppDelegate.getInstance().createShader();
|
this._programId = LAppDelegate.getInstance().createShader();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* タッチされた時に呼ばれる。
|
* 在触摸时被调用。
|
||||||
*
|
*
|
||||||
* @param pointX スクリーンX座標
|
* @param pointX 屏幕X坐标
|
||||||
* @param pointY スクリーンY座標
|
* @param pointY 屏幕Y坐标
|
||||||
*/
|
*/
|
||||||
public onTouchesBegan(pointX: number, pointY: number): void {
|
public onTouchesBegan(pointX: number, pointY: number): void {
|
||||||
this._touchManager.touchesBegan(
|
this._touchManager.touchesBegan(
|
||||||
|
@ -183,10 +183,10 @@ export class LAppView {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* タッチしているときにポインタが動いたら呼ばれる。
|
* 当触摸时,指针移动时被调用。
|
||||||
*
|
*
|
||||||
* @param pointX スクリーンX座標
|
* @param pointX 屏幕X坐标
|
||||||
* @param pointY スクリーンY座標
|
* @param pointY 屏幕Y坐标
|
||||||
*/
|
*/
|
||||||
public onTouchesMoved(pointX: number, pointY: number): void {
|
public onTouchesMoved(pointX: number, pointY: number): void {
|
||||||
const viewX: number = this.transformViewX(this._touchManager.getX());
|
const viewX: number = this.transformViewX(this._touchManager.getX());
|
||||||
|
@ -202,31 +202,31 @@ export class LAppView {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* タッチが終了したら呼ばれる。
|
* 触摸结束时被调用。
|
||||||
*
|
*
|
||||||
* @param pointX スクリーンX座標
|
* @param pointX 屏幕X坐标
|
||||||
* @param pointY スクリーンY座標
|
* @param pointY 屏幕Y坐标
|
||||||
*/
|
*/
|
||||||
public onTouchesEnded(pointX: number, pointY: number): void {
|
public onTouchesEnded(pointX: number, pointY: number): void {
|
||||||
// タッチ終了
|
// 触摸结束
|
||||||
const live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
|
const live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
|
||||||
live2DManager.onDrag(0.0, 0.0);
|
live2DManager.onDrag(0.0, 0.0);
|
||||||
|
|
||||||
{
|
{
|
||||||
// シングルタップ
|
// 单次触摸
|
||||||
const x: number = this._deviceToScreen.transformX(
|
const x: number = this._deviceToScreen.transformX(
|
||||||
this._touchManager.getX()
|
this._touchManager.getX()
|
||||||
); // 論理座標変換した座標を取得。
|
); // 获取经过逻辑坐标转换的坐标。
|
||||||
const y: number = this._deviceToScreen.transformY(
|
const y: number = this._deviceToScreen.transformY(
|
||||||
this._touchManager.getY()
|
this._touchManager.getY()
|
||||||
); // 論理座標変化した座標を取得。
|
); // 获取经过逻辑坐标转换的坐标。
|
||||||
|
|
||||||
if (LAppDefine.DebugTouchLogEnable) {
|
if (LAppDefine.DebugTouchLogEnable) {
|
||||||
LAppPal.printMessage(`[APP]touchesEnded x: ${x} y: ${y}`);
|
LAppPal.printMessage(`[APP]touchesEnded x: ${x} y: ${y}`);
|
||||||
}
|
}
|
||||||
live2DManager.onTap(x, y);
|
live2DManager.onTap(x, y);
|
||||||
|
|
||||||
// 歯車にタップしたか
|
// 点击了齿轮?
|
||||||
if (
|
if (
|
||||||
this._gear.isHit(
|
this._gear.isHit(
|
||||||
pointX * window.devicePixelRatio,
|
pointX * window.devicePixelRatio,
|
||||||
|
@ -239,48 +239,48 @@ export class LAppView {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* X座標をView座標に変換する。
|
* 将X坐标转换为View坐标。
|
||||||
*
|
*
|
||||||
* @param deviceX デバイスX座標
|
* @param deviceX 设备X坐标
|
||||||
*/
|
*/
|
||||||
public transformViewX(deviceX: number): number {
|
public transformViewX(deviceX: number): number {
|
||||||
const screenX: number = this._deviceToScreen.transformX(deviceX); // 論理座標変換した座標を取得。
|
const screenX: number = this._deviceToScreen.transformX(deviceX); // 获取经过逻辑坐标转换的坐标。
|
||||||
return this._viewMatrix.invertTransformX(screenX); // 拡大、縮小、移動後の値。
|
return this._viewMatrix.invertTransformX(screenX); // 获取缩放,移动后的值。
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Y座標をView座標に変換する。
|
* 将Y坐标转换为View坐标。
|
||||||
*
|
*
|
||||||
* @param deviceY デバイスY座標
|
* @param deviceY 设备Y坐标
|
||||||
*/
|
*/
|
||||||
public transformViewY(deviceY: number): number {
|
public transformViewY(deviceY: number): number {
|
||||||
const screenY: number = this._deviceToScreen.transformY(deviceY); // 論理座標変換した座標を取得。
|
const screenY: number = this._deviceToScreen.transformY(deviceY); // 获取经过逻辑坐标转换的坐标。
|
||||||
return this._viewMatrix.invertTransformY(screenY);
|
return this._viewMatrix.invertTransformY(screenY);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* X座標をScreen座標に変換する。
|
* 将X坐标转换为Screen坐标。
|
||||||
* @param deviceX デバイスX座標
|
* @param deviceX 设备X坐标
|
||||||
*/
|
*/
|
||||||
public transformScreenX(deviceX: number): number {
|
public transformScreenX(deviceX: number): number {
|
||||||
return this._deviceToScreen.transformX(deviceX);
|
return this._deviceToScreen.transformX(deviceX);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Y座標をScreen座標に変換する。
|
* 将Y坐标转换为Screen坐标。
|
||||||
*
|
*
|
||||||
* @param deviceY デバイスY座標
|
* @param deviceY 设备Y坐标
|
||||||
*/
|
*/
|
||||||
public transformScreenY(deviceY: number): number {
|
public transformScreenY(deviceY: number): number {
|
||||||
return this._deviceToScreen.transformY(deviceY);
|
return this._deviceToScreen.transformY(deviceY);
|
||||||
}
|
}
|
||||||
|
|
||||||
_touchManager: TouchManager; // タッチマネージャー
|
_touchManager: TouchManager; // 触摸管理器
|
||||||
_deviceToScreen: CubismMatrix44; // デバイスからスクリーンへの行列
|
_deviceToScreen: CubismMatrix44; // 从设备到屏幕的矩阵
|
||||||
_viewMatrix: CubismViewMatrix; // viewMatrix
|
_viewMatrix: CubismViewMatrix; // viewMatrix
|
||||||
_programId: WebGLProgram; // シェーダID
|
_programId: WebGLProgram; // 着色器ID
|
||||||
_back: LAppSprite; // 背景画像
|
_back: LAppSprite; // 背景图片
|
||||||
_gear: LAppSprite; // ギア画像
|
_gear: LAppSprite; // 齿轮图片
|
||||||
_changeModel: boolean; // モデル切り替えフラグ
|
_changeModel: boolean; // 模型切换标志
|
||||||
_isClick: boolean; // クリック中
|
_isClick: boolean; // 正在点击
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,10 +11,9 @@ export let s_instance: LAppWavFileHandler = null;
|
||||||
|
|
||||||
export class LAppWavFileHandler {
|
export class LAppWavFileHandler {
|
||||||
/**
|
/**
|
||||||
* クラスのインスタンス(シングルトン)を返す。
|
* 返回类的实例(单例)。如果实例尚未生成,则在内部生成实例。
|
||||||
* インスタンスが生成されていない場合は内部でインスタンスを生成する。
|
|
||||||
*
|
*
|
||||||
* @return クラスのインスタンス
|
* @return 类的实例
|
||||||
*/
|
*/
|
||||||
public static getInstance(): LAppWavFileHandler {
|
public static getInstance(): LAppWavFileHandler {
|
||||||
if (s_instance == null) {
|
if (s_instance == null) {
|
||||||
|
@ -25,7 +24,7 @@ export class LAppWavFileHandler {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* クラスのインスタンス(シングルトン)を解放する。
|
* 释放类的实例(单例)。
|
||||||
*/
|
*/
|
||||||
public static releaseInstance(): void {
|
public static releaseInstance(): void {
|
||||||
if (s_instance != null) {
|
if (s_instance != null) {
|
||||||
|
@ -39,7 +38,7 @@ export class LAppWavFileHandler {
|
||||||
let goalOffset: number;
|
let goalOffset: number;
|
||||||
let rms: number;
|
let rms: number;
|
||||||
|
|
||||||
// データロード前/ファイル末尾に達した場合は更新しない
|
// 如果在加载数据之前/达到文件末尾,则不更新
|
||||||
if (
|
if (
|
||||||
this._pcmData == null ||
|
this._pcmData == null ||
|
||||||
this._sampleOffset >= this._wavFileInfo._samplesPerChannel
|
this._sampleOffset >= this._wavFileInfo._samplesPerChannel
|
||||||
|
@ -48,7 +47,7 @@ export class LAppWavFileHandler {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 経過時間後の状態を保持
|
// 保持经过时间后的状态
|
||||||
this._userTimeSeconds += deltaTimeSeconds;
|
this._userTimeSeconds += deltaTimeSeconds;
|
||||||
goalOffset = Math.floor(
|
goalOffset = Math.floor(
|
||||||
this._userTimeSeconds * this._wavFileInfo._samplingRate
|
this._userTimeSeconds * this._wavFileInfo._samplingRate
|
||||||
|
@ -57,7 +56,7 @@ export class LAppWavFileHandler {
|
||||||
goalOffset = this._wavFileInfo._samplesPerChannel;
|
goalOffset = this._wavFileInfo._samplesPerChannel;
|
||||||
}
|
}
|
||||||
|
|
||||||
// RMS計測
|
// RMS测量
|
||||||
rms = 0.0;
|
rms = 0.0;
|
||||||
for (
|
for (
|
||||||
let channelCount = 0;
|
let channelCount = 0;
|
||||||
|
@ -85,11 +84,11 @@ export class LAppWavFileHandler {
|
||||||
}
|
}
|
||||||
|
|
||||||
public start(filePath: string): void {
|
public start(filePath: string): void {
|
||||||
// サンプル位参照位置を初期化
|
// 初始化样本位参考位置
|
||||||
this._sampleOffset = 0;
|
this._sampleOffset = 0;
|
||||||
this._userTimeSeconds = 0.0;
|
this._userTimeSeconds = 0.0;
|
||||||
|
|
||||||
// RMS値をリセット
|
// 重置RMS值
|
||||||
this._lastRms = 0.0;
|
this._lastRms = 0.0;
|
||||||
|
|
||||||
if (!this.loadWavFile(filePath)) {
|
if (!this.loadWavFile(filePath)) {
|
||||||
|
@ -108,7 +107,7 @@ export class LAppWavFileHandler {
|
||||||
this.releasePcmData();
|
this.releasePcmData();
|
||||||
}
|
}
|
||||||
|
|
||||||
// ファイルロード
|
// 文件加载
|
||||||
const asyncFileLoad = async () => {
|
const asyncFileLoad = async () => {
|
||||||
return fetch(filePath).then(responce => {
|
return fetch(filePath).then(responce => {
|
||||||
return responce.arrayBuffer();
|
return responce.arrayBuffer();
|
||||||
|
@ -121,7 +120,7 @@ export class LAppWavFileHandler {
|
||||||
this._byteReader._fileSize = this._byteReader._fileByte.byteLength;
|
this._byteReader._fileSize = this._byteReader._fileByte.byteLength;
|
||||||
this._byteReader._readOffset = 0;
|
this._byteReader._readOffset = 0;
|
||||||
|
|
||||||
// ファイルロードに失敗しているか、先頭のシグネチャ"RIFF"を入れるサイズもない場合は失敗
|
// 如果文件加载失败或者没有足够的大小来插入顶部的签名"RIFF",则失败
|
||||||
if (
|
if (
|
||||||
this._byteReader._fileByte == null ||
|
this._byteReader._fileByte == null ||
|
||||||
this._byteReader._fileSize < 4
|
this._byteReader._fileSize < 4
|
||||||
|
@ -129,50 +128,50 @@ export class LAppWavFileHandler {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ファイル名
|
// 文件名
|
||||||
this._wavFileInfo._fileName = filePath;
|
this._wavFileInfo._fileName = filePath;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// シグネチャ "RIFF"
|
// 签名 "RIFF"
|
||||||
if (!this._byteReader.getCheckSignature('RIFF')) {
|
if (!this._byteReader.getCheckSignature('RIFF')) {
|
||||||
ret = false;
|
ret = false;
|
||||||
throw new Error('Cannot find Signeture "RIFF".');
|
throw new Error('Cannot find Signeture "RIFF".');
|
||||||
}
|
}
|
||||||
// ファイルサイズ-8(読み飛ばし)
|
// 文件大小-8(跳过)
|
||||||
this._byteReader.get32LittleEndian();
|
this._byteReader.get32LittleEndian();
|
||||||
// シグネチャ "WAVE"
|
// 签名 "WAVE"
|
||||||
if (!this._byteReader.getCheckSignature('WAVE')) {
|
if (!this._byteReader.getCheckSignature('WAVE')) {
|
||||||
ret = false;
|
ret = false;
|
||||||
throw new Error('Cannot find Signeture "WAVE".');
|
throw new Error('Cannot find Signeture "WAVE".');
|
||||||
}
|
}
|
||||||
// シグネチャ "fmt "
|
// 签名 "fmt "
|
||||||
if (!this._byteReader.getCheckSignature('fmt ')) {
|
if (!this._byteReader.getCheckSignature('fmt ')) {
|
||||||
ret = false;
|
ret = false;
|
||||||
throw new Error('Cannot find Signeture "fmt".');
|
throw new Error('Cannot find Signeture "fmt".');
|
||||||
}
|
}
|
||||||
// fmtチャンクサイズ
|
// fmt块大小
|
||||||
const fmtChunkSize = this._byteReader.get32LittleEndian();
|
const fmtChunkSize = this._byteReader.get32LittleEndian();
|
||||||
// フォーマットIDは1(リニアPCM)以外受け付けない
|
// 格式ID不接受1(线性PCM)以外的格式
|
||||||
if (this._byteReader.get16LittleEndian() != 1) {
|
if (this._byteReader.get16LittleEndian() != 1) {
|
||||||
ret = false;
|
ret = false;
|
||||||
throw new Error('File is not linear PCM.');
|
throw new Error('File is not linear PCM.');
|
||||||
}
|
}
|
||||||
// チャンネル数
|
// 通道数量
|
||||||
this._wavFileInfo._numberOfChannels =
|
this._wavFileInfo._numberOfChannels =
|
||||||
this._byteReader.get16LittleEndian();
|
this._byteReader.get16LittleEndian();
|
||||||
// サンプリングレート
|
// 采样率
|
||||||
this._wavFileInfo._samplingRate = this._byteReader.get32LittleEndian();
|
this._wavFileInfo._samplingRate = this._byteReader.get32LittleEndian();
|
||||||
// データ速度[byte/sec](読み飛ばし)
|
// 数据速度[byte/sec](跳过)
|
||||||
this._byteReader.get32LittleEndian();
|
this._byteReader.get32LittleEndian();
|
||||||
// ブロックサイズ(読み飛ばし)
|
// 块大小(跳过)
|
||||||
this._byteReader.get16LittleEndian();
|
this._byteReader.get16LittleEndian();
|
||||||
// 量子化ビット数
|
// 量化位数
|
||||||
this._wavFileInfo._bitsPerSample = this._byteReader.get16LittleEndian();
|
this._wavFileInfo._bitsPerSample = this._byteReader.get16LittleEndian();
|
||||||
// fmtチャンクの拡張部分の読み飛ばし
|
// 跳过fmt块的扩展部分
|
||||||
if (fmtChunkSize > 16) {
|
if (fmtChunkSize > 16) {
|
||||||
this._byteReader._readOffset += fmtChunkSize - 16;
|
this._byteReader._readOffset += fmtChunkSize - 16;
|
||||||
}
|
}
|
||||||
// "data"チャンクが出現するまで読み飛ばし
|
// 跳过直到出现"data"块
|
||||||
while (
|
while (
|
||||||
!this._byteReader.getCheckSignature('data') &&
|
!this._byteReader.getCheckSignature('data') &&
|
||||||
this._byteReader._readOffset < this._byteReader._fileSize
|
this._byteReader._readOffset < this._byteReader._fileSize
|
||||||
|
@ -180,12 +179,12 @@ export class LAppWavFileHandler {
|
||||||
this._byteReader._readOffset +=
|
this._byteReader._readOffset +=
|
||||||
this._byteReader.get32LittleEndian() + 4;
|
this._byteReader.get32LittleEndian() + 4;
|
||||||
}
|
}
|
||||||
// ファイル内に"data"チャンクが出現しなかった
|
// 文件中没有出现"data"块
|
||||||
if (this._byteReader._readOffset >= this._byteReader._fileSize) {
|
if (this._byteReader._readOffset >= this._byteReader._fileSize) {
|
||||||
ret = false;
|
ret = false;
|
||||||
throw new Error('Cannot find "data" Chunk.');
|
throw new Error('Cannot find "data" Chunk.');
|
||||||
}
|
}
|
||||||
// サンプル数
|
// 样本数量
|
||||||
{
|
{
|
||||||
const dataChunkSize = this._byteReader.get32LittleEndian();
|
const dataChunkSize = this._byteReader.get32LittleEndian();
|
||||||
this._wavFileInfo._samplesPerChannel =
|
this._wavFileInfo._samplesPerChannel =
|
||||||
|
@ -193,7 +192,7 @@ export class LAppWavFileHandler {
|
||||||
(this._wavFileInfo._bitsPerSample *
|
(this._wavFileInfo._bitsPerSample *
|
||||||
this._wavFileInfo._numberOfChannels);
|
this._wavFileInfo._numberOfChannels);
|
||||||
}
|
}
|
||||||
// 領域確保
|
// 保留区域
|
||||||
this._pcmData = new Array(this._wavFileInfo._numberOfChannels);
|
this._pcmData = new Array(this._wavFileInfo._numberOfChannels);
|
||||||
for (
|
for (
|
||||||
let channelCount = 0;
|
let channelCount = 0;
|
||||||
|
@ -204,7 +203,7 @@ export class LAppWavFileHandler {
|
||||||
this._wavFileInfo._samplesPerChannel
|
this._wavFileInfo._samplesPerChannel
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// 波形データ取得
|
// 获取波形数据
|
||||||
for (
|
for (
|
||||||
let sampleCount = 0;
|
let sampleCount = 0;
|
||||||
sampleCount < this._wavFileInfo._samplesPerChannel;
|
sampleCount < this._wavFileInfo._samplesPerChannel;
|
||||||
|
@ -231,7 +230,7 @@ export class LAppWavFileHandler {
|
||||||
public getPcmSample(): number {
|
public getPcmSample(): number {
|
||||||
let pcm32;
|
let pcm32;
|
||||||
|
|
||||||
// 32ビット幅に拡張してから-1~1の範囲に丸める
|
// 在扩展到32位宽度后,将其四舍五入到-1~1的范围内
|
||||||
switch (this._wavFileInfo._bitsPerSample) {
|
switch (this._wavFileInfo._bitsPerSample) {
|
||||||
case 8:
|
case 8:
|
||||||
pcm32 = this._byteReader.get8() - 128;
|
pcm32 = this._byteReader.get8() - 128;
|
||||||
|
@ -244,7 +243,7 @@ export class LAppWavFileHandler {
|
||||||
pcm32 = this._byteReader.get24LittleEndian() << 8;
|
pcm32 = this._byteReader.get24LittleEndian() << 8;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
// 対応していないビット幅
|
// 不支持的位宽
|
||||||
pcm32 = 0;
|
pcm32 = 0;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -295,11 +294,11 @@ export class WavFileInfo {
|
||||||
this._samplesPerChannel = 0;
|
this._samplesPerChannel = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
_fileName: string; ///< ファイル名
|
_fileName: string; ///< 文件名
|
||||||
_numberOfChannels: number; ///< チャンネル数
|
_numberOfChannels: number; ///< 通道数
|
||||||
_bitsPerSample: number; ///< サンプルあたりビット数
|
_bitsPerSample: number; ///< 每个样本的位数
|
||||||
_samplingRate: number; ///< サンプリングレート
|
_samplingRate: number; ///< 采样率
|
||||||
_samplesPerChannel: number; ///< 1チャンネルあたり総サンプル数
|
_samplesPerChannel: number; ///< 每个通道的总样本数
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ByteReader {
|
export class ByteReader {
|
||||||
|
@ -311,8 +310,8 @@ export class ByteReader {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 8ビット読み込み
|
* @brief 8位读取
|
||||||
* @return Csm::csmUint8 読み取った8ビット値
|
* @return Csm::csmUint8 读取的8位值
|
||||||
*/
|
*/
|
||||||
public get8(): number {
|
public get8(): number {
|
||||||
const ret = this._fileDataView.getUint8(this._readOffset);
|
const ret = this._fileDataView.getUint8(this._readOffset);
|
||||||
|
@ -321,8 +320,8 @@ export class ByteReader {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 16ビット読み込み(リトルエンディアン)
|
* @brief 16位读取(小端)
|
||||||
* @return Csm::csmUint16 読み取った16ビット値
|
* @return Csm::csmUint16 读取的16位值
|
||||||
*/
|
*/
|
||||||
public get16LittleEndian(): number {
|
public get16LittleEndian(): number {
|
||||||
const ret =
|
const ret =
|
||||||
|
@ -333,8 +332,8 @@ export class ByteReader {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 24ビット読み込み(リトルエンディアン)
|
* @brief 24位读取(小端)
|
||||||
* @return Csm::csmUint32 読み取った24ビット値(下位24ビットに設定)
|
* @return Csm::csmUint32 读取的24位值(设置在低24位)
|
||||||
*/
|
*/
|
||||||
public get24LittleEndian(): number {
|
public get24LittleEndian(): number {
|
||||||
const ret =
|
const ret =
|
||||||
|
@ -346,8 +345,8 @@ export class ByteReader {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 32ビット読み込み(リトルエンディアン)
|
* @brief 32位读取(小端)
|
||||||
* @return Csm::csmUint32 読み取った32ビット値
|
* @return Csm::csmUint32 读取的32位值
|
||||||
*/
|
*/
|
||||||
public get32LittleEndian(): number {
|
public get32LittleEndian(): number {
|
||||||
const ret =
|
const ret =
|
||||||
|
@ -360,10 +359,10 @@ export class ByteReader {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief シグネチャの取得と参照文字列との一致チェック
|
* @brief 获取签名并检查与参照字符串是否匹配
|
||||||
* @param[in] reference 検査対象のシグネチャ文字列
|
* @param[in] reference 被检查的签名字符串
|
||||||
* @retval true 一致している
|
* @retval true 匹配
|
||||||
* @retval false 一致していない
|
* @retval false 不匹配
|
||||||
*/
|
*/
|
||||||
public getCheckSignature(reference: string): boolean {
|
public getCheckSignature(reference: string): boolean {
|
||||||
const getSignature: Uint8Array = new Uint8Array(4);
|
const getSignature: Uint8Array = new Uint8Array(4);
|
||||||
|
@ -382,8 +381,8 @@ export class ByteReader {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
_fileByte: ArrayBuffer; ///< ロードしたファイルのバイト列
|
_fileByte: ArrayBuffer; ///< 加载的文件字节序列
|
||||||
_fileDataView: DataView;
|
_fileDataView: DataView;
|
||||||
_fileSize: number; ///< ファイルサイズ
|
_fileSize: number; ///< 文件大小
|
||||||
_readOffset: number; ///< ファイル参照位置
|
_readOffset: number; ///< 文件引用位置
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,12 +9,12 @@ import { LAppDelegate } from './lappdelegate';
|
||||||
import * as LAppDefine from './lappdefine';
|
import * as LAppDefine from './lappdefine';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ブラウザロード後の処理
|
* 浏览器加载后的处理
|
||||||
*/
|
*/
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'load',
|
'load',
|
||||||
(): void => {
|
(): void => {
|
||||||
// create the application instance
|
// 创建应用实例
|
||||||
if (LAppDelegate.getInstance().initialize() == false) {
|
if (LAppDelegate.getInstance().initialize() == false) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,7 @@ window.addEventListener(
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 終了時の処理
|
* 结束时的处理
|
||||||
*/
|
*/
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'beforeunload',
|
'beforeunload',
|
||||||
|
@ -34,7 +34,7 @@ window.addEventListener(
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Process when changing screen size.
|
* 改变屏幕大小时的处理
|
||||||
*/
|
*/
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'resize',
|
'resize',
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
export class TouchManager {
|
export class TouchManager {
|
||||||
/**
|
/**
|
||||||
* コンストラクタ
|
* 构造器
|
||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
this._startX = 0.0;
|
this._startX = 0.0;
|
||||||
|
@ -91,9 +91,9 @@ export class TouchManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* タッチ開始時イベント
|
* 触摸开始时的事件
|
||||||
* @param deviceX タッチした画面のxの値
|
* @param deviceX 触摸屏幕的x值
|
||||||
* @param deviceY タッチした画面のyの値
|
* @param deviceY 触摸屏幕的y值
|
||||||
*/
|
*/
|
||||||
public touchesBegan(deviceX: number, deviceY: number): void {
|
public touchesBegan(deviceX: number, deviceY: number): void {
|
||||||
this._lastX = deviceX;
|
this._lastX = deviceX;
|
||||||
|
@ -106,9 +106,9 @@ export class TouchManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ドラッグ時のイベント
|
* 拖动时的事件
|
||||||
* @param deviceX タッチした画面のxの値
|
* @param deviceX 触摸屏幕的x值
|
||||||
* @param deviceY タッチした画面のyの値
|
* @param deviceY 触摸屏幕的y值
|
||||||
*/
|
*/
|
||||||
public touchesMoved(deviceX: number, deviceY: number): void {
|
public touchesMoved(deviceX: number, deviceY: number): void {
|
||||||
this._lastX = deviceX;
|
this._lastX = deviceX;
|
||||||
|
@ -118,8 +118,8 @@ export class TouchManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* フリックの距離測定
|
* 测量flick的距离
|
||||||
* @return フリック距離
|
* @return flick距离
|
||||||
*/
|
*/
|
||||||
public getFlickDistance(): number {
|
public getFlickDistance(): number {
|
||||||
return this.calculateDistance(
|
return this.calculateDistance(
|
||||||
|
@ -131,12 +131,12 @@ export class TouchManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 点1から点2への距離を求める
|
* 求从点1到点2的距离
|
||||||
*
|
*
|
||||||
* @param x1 1つ目のタッチした画面のxの値
|
* @param x1 触摸屏幕的第一个点的x值
|
||||||
* @param y1 1つ目のタッチした画面のyの値
|
* @param y1 触摸屏幕的第一个点的y值
|
||||||
* @param x2 2つ目のタッチした画面のxの値
|
* @param x2 触摸屏幕的第二个点的x值
|
||||||
* @param y2 2つ目のタッチした画面のyの値
|
* @param y2 触摸屏幕的第二个点的y值
|
||||||
*/
|
*/
|
||||||
public calculateDistance(
|
public calculateDistance(
|
||||||
x1: number,
|
x1: number,
|
||||||
|
@ -148,13 +148,13 @@ export class TouchManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 2つ目の値から、移動量を求める。
|
* 从第二个值开始,求移动量。
|
||||||
* 違う方向の場合は移動量0。同じ方向の場合は、絶対値が小さい方の値を参照する。
|
* 如果方向不同,则移动量为0。如果方向相同,则参考绝对值较小的值。
|
||||||
*
|
*
|
||||||
* @param v1 1つ目の移動量
|
* @param v1 第一个移动量
|
||||||
* @param v2 2つ目の移動量
|
* @param v2 第二个移动量
|
||||||
*
|
*
|
||||||
* @return 小さい方の移動量
|
* @return 较小的移动量
|
||||||
*/
|
*/
|
||||||
public calculateMovingAmount(v1: number, v2: number): number {
|
public calculateMovingAmount(v1: number, v2: number): number {
|
||||||
if (v1 > 0.0 != v2 > 0.0) {
|
if (v1 > 0.0 != v2 > 0.0) {
|
||||||
|
@ -169,18 +169,18 @@ export class TouchManager {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
_startY: number; // タッチを開始した時のxの値
|
_startY: number; // 触摸开始时的x值
|
||||||
_startX: number; // タッチを開始した時のyの値
|
_startX: number; // 触摸开始时的y值
|
||||||
_lastX: number; // シングルタッチ時のxの値
|
_lastX: number; // 单点触摸时的x值
|
||||||
_lastY: number; // シングルタッチ時のyの値
|
_lastY: number; // 单点触摸时的y值
|
||||||
_lastX1: number; // ダブルタッチ時の一つ目のxの値
|
_lastX1: number; // 双点触摸时的第一个点的x值
|
||||||
_lastY1: number; // ダブルタッチ時の一つ目のyの値
|
_lastY1: number; // 双点触摸时的第一个点的y值
|
||||||
_lastX2: number; // ダブルタッチ時の二つ目のxの値
|
_lastX2: number; // 双点触摸时的第二个点的x值
|
||||||
_lastY2: number; // ダブルタッチ時の二つ目のyの値
|
_lastY2: number; // 双点触摸时的第二个点的y值
|
||||||
_lastTouchDistance: number; // 2本以上でタッチしたときの指の距離
|
_lastTouchDistance: number; // 当触摸2个以上的点时,指的距离
|
||||||
_deltaX: number; // 前回の値から今回の値へのxの移動距離。
|
_deltaX: number; // 从上一个值到现在的值的x移动距离。
|
||||||
_deltaY: number; // 前回の値から今回の値へのyの移動距離。
|
_deltaY: number; // 从上一个值到现在的值的y移动距离。
|
||||||
_scale: number; // このフレームで掛け合わせる拡大率。拡大操作中以外は1。
|
_scale: number; // 这一帧要乘的缩放比例。除了缩放操作中,其他时候为1。
|
||||||
_touchSingle: boolean; // シングルタッチ時はtrue
|
_touchSingle: boolean; // 单点触摸时为true
|
||||||
_flipAvailable: boolean; // フリップが有効かどうか
|
_flipAvailable: boolean; // flick是否可用
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,7 +34,7 @@ module.exports = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
hot: true,
|
hot: true,
|
||||||
port: 5000,
|
port: 8080,
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
compress: true,
|
compress: true,
|
||||||
devMiddleware: {
|
devMiddleware: {
|
||||||
|
|
Loading…
Reference in New Issue