Code edit (1 edits merged)
Please save this source code
User prompt
Style Studio: Character Makeover
Initial prompt
Toca hair salon 4 (2019). Tap on the character you want to play as, tap on the tool to get started, tap on any colored crayon to color your skin, tap on any colored spray paint to color your hair, tap on the camera to take a photo.
/**** * 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);
===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,330 @@
-/****
+/****
+* 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: 0x000000
-});
\ No newline at end of file
+ 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);
\ No newline at end of file