/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Character = Container.expand(function () { var self = Container.call(this); // Character parts var body = self.attachAsset('character-base', { anchorX: 0.5, anchorY: 1 }); var head = self.attachAsset('character-head', { anchorX: 0.5, anchorY: 0.5 }); var hair = self.attachAsset('character-hair', { anchorX: 0.5, anchorY: 0.5 }); var leftEye = self.attachAsset('character-eyes', { anchorX: 0.5, anchorY: 0.5 }); var rightEye = self.attachAsset('character-eyes', { anchorX: 0.5, anchorY: 0.5 }); var lips = self.attachAsset('character-lips', { anchorX: 0.5, anchorY: 0.5 }); var leftCheek = self.attachAsset('character-cheeks', { anchorX: 0.5, anchorY: 0.5, alpha: 0.6 }); var rightCheek = self.attachAsset('character-cheeks', { anchorX: 0.5, anchorY: 0.5, alpha: 0.6 }); // Position parts head.y = -150; hair.y = -180; leftEye.x = -30; leftEye.y = -160; rightEye.x = 30; rightEye.y = -160; lips.y = -120; leftCheek.x = -50; leftCheek.y = -140; rightCheek.x = 50; rightCheek.y = -140; // Store references for easy access self.parts = { body: body, head: head, hair: hair, leftEye: leftEye, rightEye: rightEye, lips: lips, leftCheek: leftCheek, rightCheek: rightCheek }; self.changeSkinTone = function (color) { self.parts.body.tint = color; self.parts.head.tint = color; tween(self.parts.body, { alpha: 0.8 }, { duration: 200 }); tween(self.parts.body, { alpha: 1 }, { duration: 200 }); }; self.changeHairColor = function (color) { self.parts.hair.tint = color; tween(self.parts.hair, { scaleX: 1.1, scaleY: 1.1 }, { duration: 200 }); tween(self.parts.hair, { scaleX: 1, scaleY: 1 }, { duration: 200 }); }; self.applyMakeup = function (part, color) { if (part === 'lips') { self.parts.lips.tint = color; } else if (part === 'cheeks') { self.parts.leftCheek.tint = color; self.parts.rightCheek.tint = color; self.parts.leftCheek.alpha = 0.8; self.parts.rightCheek.alpha = 0.8; } tween(self.parts[part] || self.parts.lips, { scaleX: 1.2, scaleY: 1.2 }, { duration: 150 }); tween(self.parts[part] || self.parts.lips, { scaleX: 1, scaleY: 1 }, { duration: 150 }); }; return self; }); var ColorSwatch = Container.expand(function (color) { var self = Container.call(this); var swatch = self.attachAsset('color-swatch', { anchorX: 0.5, anchorY: 0.5, tint: color }); self.color = color; self.down = function (x, y, obj) { currentColor = self.color; updateColorSelection(); LK.getSound('tool-select').play(); }; return self; }); var ToolButton = Container.expand(function (toolType, icon) { var self = Container.call(this); var button = self.attachAsset('tool-button', { anchorX: 0.5, anchorY: 0.5 }); var iconSprite = self.attachAsset(icon, { anchorX: 0.5, anchorY: 0.5 }); self.toolType = toolType; self.isSelected = false; self.setSelected = function (selected) { self.isSelected = selected; if (selected) { button.tint = 0xadd8e6; tween(self, { scaleX: 1.1, scaleY: 1.1 }, { duration: 200 }); } else { button.tint = 0xffffff; tween(self, { scaleX: 1, scaleY: 1 }, { duration: 200 }); } }; self.down = function (x, y, obj) { currentTool = self.toolType; updateToolSelection(); LK.getSound('tool-select').play(); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xf8f8ff }); /**** * Game Code ****/ // Tool icons (simple shapes for now) // UI elements // Character base shapes // Game state var currentTool = 'hair'; var currentColor = 0xff0000; var character; var toolButtons = []; var colorSwatches = []; // Color palettes var hairColors = [0x8b4513, 0xffd700, 0x000000, 0xff4500, 0x9932cc, 0x00ff00]; var skinColors = [0xfdbcb4, 0xf1c27d, 0xe0ac69, 0xc68642, 0x8d5524, 0x6b4226]; var makeupColors = [0xff69b4, 0xff0000, 0x800080, 0xff1493, 0xdc143c, 0x4b0082]; // Create character character = game.addChild(new Character()); character.x = 1024; character.y = 1800; // Create toolbar background var toolbar = game.addChild(LK.getAsset('toolbar-bg', { anchorX: 0, anchorY: 0, x: 0, y: 0 })); // Create tool buttons var tools = [{ type: 'hair', icon: 'hair-tool' }, { type: 'makeup', icon: 'makeup-tool' }, { type: 'skin', icon: 'skin-tool' }, { type: 'camera', icon: 'camera-tool' }]; for (var i = 0; i < tools.length; i++) { var toolButton = game.addChild(new ToolButton(tools[i].type, tools[i].icon)); toolButton.x = 100; toolButton.y = 200 + i * 120; toolButtons.push(toolButton); } // Create color palette background var colorPalette = game.addChild(LK.getAsset('color-palette-bg', { anchorX: 0, anchorY: 1, x: 0, y: 2732 })); // Create color swatches function createColorSwatches() { // Clear existing swatches for (var i = 0; i < colorSwatches.length; i++) { colorSwatches[i].destroy(); } colorSwatches = []; var colors = []; if (currentTool === 'hair') { colors = hairColors; } else if (currentTool === 'skin') { colors = skinColors; } else if (currentTool === 'makeup') { colors = makeupColors; } for (var i = 0; i < colors.length; i++) { var swatch = game.addChild(new ColorSwatch(colors[i])); swatch.x = 300 + i * 80; swatch.y = 2660; colorSwatches.push(swatch); } } // Update tool selection function updateToolSelection() { for (var i = 0; i < toolButtons.length; i++) { toolButtons[i].setSelected(toolButtons[i].toolType === currentTool); } createColorSwatches(); } // Update color selection function updateColorSelection() { for (var i = 0; i < colorSwatches.length; i++) { if (colorSwatches[i].color === currentColor) { tween(colorSwatches[i], { scaleX: 1.2, scaleY: 1.2 }, { duration: 200 }); } else { tween(colorSwatches[i], { scaleX: 1, scaleY: 1 }, { duration: 200 }); } } } // Character interaction character.down = function (x, y, obj) { if (currentTool === 'camera') { // Flash effect for photo LK.effects.flashScreen(0xffffff, 500); return; } var localPos = character.toLocal(obj.parent.toGlobal(obj.position)); if (currentTool === 'hair') { character.changeHairColor(currentColor); } else if (currentTool === 'skin') { character.changeSkinTone(currentColor); } else if (currentTool === 'makeup') { // Determine which makeup part based on position if (localPos.y > -130 && localPos.y < -110) { character.applyMakeup('lips', currentColor); } else if (localPos.y > -150 && localPos.y < -130) { character.applyMakeup('cheeks', currentColor); } } LK.getSound('apply-color').play(); }; // Initialize default state updateToolSelection(); currentColor = hairColors[0]; updateColorSelection(); // Title text var titleText = new Text2('Style Studio', { size: 80, fill: 0x4A4A4A }); titleText.anchor.set(0.5, 0); titleText.x = 1024; titleText.y = 50; game.addChild(titleText); // Instructions text var instructionText = new Text2('Tap tools and colors to style your character!', { size: 40, fill: 0x666666 }); instructionText.anchor.set(0.5, 0); instructionText.x = 1024; instructionText.y = 150; game.addChild(instructionText);
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Character = Container.expand(function () {
var self = Container.call(this);
// Character parts
var body = self.attachAsset('character-base', {
anchorX: 0.5,
anchorY: 1
});
var head = self.attachAsset('character-head', {
anchorX: 0.5,
anchorY: 0.5
});
var hair = self.attachAsset('character-hair', {
anchorX: 0.5,
anchorY: 0.5
});
var leftEye = self.attachAsset('character-eyes', {
anchorX: 0.5,
anchorY: 0.5
});
var rightEye = self.attachAsset('character-eyes', {
anchorX: 0.5,
anchorY: 0.5
});
var lips = self.attachAsset('character-lips', {
anchorX: 0.5,
anchorY: 0.5
});
var leftCheek = self.attachAsset('character-cheeks', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.6
});
var rightCheek = self.attachAsset('character-cheeks', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.6
});
// Position parts
head.y = -150;
hair.y = -180;
leftEye.x = -30;
leftEye.y = -160;
rightEye.x = 30;
rightEye.y = -160;
lips.y = -120;
leftCheek.x = -50;
leftCheek.y = -140;
rightCheek.x = 50;
rightCheek.y = -140;
// Store references for easy access
self.parts = {
body: body,
head: head,
hair: hair,
leftEye: leftEye,
rightEye: rightEye,
lips: lips,
leftCheek: leftCheek,
rightCheek: rightCheek
};
self.changeSkinTone = function (color) {
self.parts.body.tint = color;
self.parts.head.tint = color;
tween(self.parts.body, {
alpha: 0.8
}, {
duration: 200
});
tween(self.parts.body, {
alpha: 1
}, {
duration: 200
});
};
self.changeHairColor = function (color) {
self.parts.hair.tint = color;
tween(self.parts.hair, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200
});
tween(self.parts.hair, {
scaleX: 1,
scaleY: 1
}, {
duration: 200
});
};
self.applyMakeup = function (part, color) {
if (part === 'lips') {
self.parts.lips.tint = color;
} else if (part === 'cheeks') {
self.parts.leftCheek.tint = color;
self.parts.rightCheek.tint = color;
self.parts.leftCheek.alpha = 0.8;
self.parts.rightCheek.alpha = 0.8;
}
tween(self.parts[part] || self.parts.lips, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 150
});
tween(self.parts[part] || self.parts.lips, {
scaleX: 1,
scaleY: 1
}, {
duration: 150
});
};
return self;
});
var ColorSwatch = Container.expand(function (color) {
var self = Container.call(this);
var swatch = self.attachAsset('color-swatch', {
anchorX: 0.5,
anchorY: 0.5,
tint: color
});
self.color = color;
self.down = function (x, y, obj) {
currentColor = self.color;
updateColorSelection();
LK.getSound('tool-select').play();
};
return self;
});
var ToolButton = Container.expand(function (toolType, icon) {
var self = Container.call(this);
var button = self.attachAsset('tool-button', {
anchorX: 0.5,
anchorY: 0.5
});
var iconSprite = self.attachAsset(icon, {
anchorX: 0.5,
anchorY: 0.5
});
self.toolType = toolType;
self.isSelected = false;
self.setSelected = function (selected) {
self.isSelected = selected;
if (selected) {
button.tint = 0xadd8e6;
tween(self, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200
});
} else {
button.tint = 0xffffff;
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 200
});
}
};
self.down = function (x, y, obj) {
currentTool = self.toolType;
updateToolSelection();
LK.getSound('tool-select').play();
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf8f8ff
});
/****
* Game Code
****/
// Tool icons (simple shapes for now)
// UI elements
// Character base shapes
// Game state
var currentTool = 'hair';
var currentColor = 0xff0000;
var character;
var toolButtons = [];
var colorSwatches = [];
// Color palettes
var hairColors = [0x8b4513, 0xffd700, 0x000000, 0xff4500, 0x9932cc, 0x00ff00];
var skinColors = [0xfdbcb4, 0xf1c27d, 0xe0ac69, 0xc68642, 0x8d5524, 0x6b4226];
var makeupColors = [0xff69b4, 0xff0000, 0x800080, 0xff1493, 0xdc143c, 0x4b0082];
// Create character
character = game.addChild(new Character());
character.x = 1024;
character.y = 1800;
// Create toolbar background
var toolbar = game.addChild(LK.getAsset('toolbar-bg', {
anchorX: 0,
anchorY: 0,
x: 0,
y: 0
}));
// Create tool buttons
var tools = [{
type: 'hair',
icon: 'hair-tool'
}, {
type: 'makeup',
icon: 'makeup-tool'
}, {
type: 'skin',
icon: 'skin-tool'
}, {
type: 'camera',
icon: 'camera-tool'
}];
for (var i = 0; i < tools.length; i++) {
var toolButton = game.addChild(new ToolButton(tools[i].type, tools[i].icon));
toolButton.x = 100;
toolButton.y = 200 + i * 120;
toolButtons.push(toolButton);
}
// Create color palette background
var colorPalette = game.addChild(LK.getAsset('color-palette-bg', {
anchorX: 0,
anchorY: 1,
x: 0,
y: 2732
}));
// Create color swatches
function createColorSwatches() {
// Clear existing swatches
for (var i = 0; i < colorSwatches.length; i++) {
colorSwatches[i].destroy();
}
colorSwatches = [];
var colors = [];
if (currentTool === 'hair') {
colors = hairColors;
} else if (currentTool === 'skin') {
colors = skinColors;
} else if (currentTool === 'makeup') {
colors = makeupColors;
}
for (var i = 0; i < colors.length; i++) {
var swatch = game.addChild(new ColorSwatch(colors[i]));
swatch.x = 300 + i * 80;
swatch.y = 2660;
colorSwatches.push(swatch);
}
}
// Update tool selection
function updateToolSelection() {
for (var i = 0; i < toolButtons.length; i++) {
toolButtons[i].setSelected(toolButtons[i].toolType === currentTool);
}
createColorSwatches();
}
// Update color selection
function updateColorSelection() {
for (var i = 0; i < colorSwatches.length; i++) {
if (colorSwatches[i].color === currentColor) {
tween(colorSwatches[i], {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 200
});
} else {
tween(colorSwatches[i], {
scaleX: 1,
scaleY: 1
}, {
duration: 200
});
}
}
}
// Character interaction
character.down = function (x, y, obj) {
if (currentTool === 'camera') {
// Flash effect for photo
LK.effects.flashScreen(0xffffff, 500);
return;
}
var localPos = character.toLocal(obj.parent.toGlobal(obj.position));
if (currentTool === 'hair') {
character.changeHairColor(currentColor);
} else if (currentTool === 'skin') {
character.changeSkinTone(currentColor);
} else if (currentTool === 'makeup') {
// Determine which makeup part based on position
if (localPos.y > -130 && localPos.y < -110) {
character.applyMakeup('lips', currentColor);
} else if (localPos.y > -150 && localPos.y < -130) {
character.applyMakeup('cheeks', currentColor);
}
}
LK.getSound('apply-color').play();
};
// Initialize default state
updateToolSelection();
currentColor = hairColors[0];
updateColorSelection();
// Title text
var titleText = new Text2('Style Studio', {
size: 80,
fill: 0x4A4A4A
});
titleText.anchor.set(0.5, 0);
titleText.x = 1024;
titleText.y = 50;
game.addChild(titleText);
// Instructions text
var instructionText = new Text2('Tap tools and colors to style your character!', {
size: 40,
fill: 0x666666
});
instructionText.anchor.set(0.5, 0);
instructionText.x = 1024;
instructionText.y = 150;
game.addChild(instructionText);