Upit | Learn about creating the game Novela Visual with gen AI

Play

Si todavía estás esperando a que te contesten ese “¿Quieres ser mi novia?” que enviaste hace años, este juego es para ti. Acompaña a Satoshi, un muchacho que, igual que tú, ha tenido más conversaciones con personajes ficticios que con personas reales. Tu objetivo: conquistar a Aiko… porque las otras rutas no funcionan (esto es una alfa, no un milagro). Ríe, sufre y elige sabiamente, porque un paso en falso y te quedas sin waifu (otra vez). Apóyanos en este viaje pixelado. Suscríbete a mi canal de Youtube @merak1388 y ayuda a que este juegazo llegue a su versión final.

#novelavisual

#romance

#anime

#estudiante

#decisiones

Creation History

User prompt

El texto de todos los elementos del juego utilizará ahora negro absoluto (#000000)

User prompt

El texto de todos los elementos del juego utilizará ahora negro absoluto (#000000)

User prompt

El texto del juego utilizará ahora un color negro (#000000) para mejorar la legibilidad.

User prompt

Ajusta las dimensiones de los elementos 'choiceButton', 'nameBox', 'dialogBox' y 'nextButton' sin alterar el tamaño del texto del juego.

User prompt

Ajusta el tamaño adecuado de los elementos "choiceButton", "nameBox", "dialogBox" y "nextButton", y asegúrate de que las imágenes sean simples.

User prompt

Esta es la continuación de la Ruta 1 de Aiko después de que Satoshi dice: "¡Lo prometo! Seré el alumno más aplicado que hayas visto.": --- 🎮 Ruta 1 – Aiko: Fase de prueba + Romance + Elección --- 📍[Escena 6 – Fondo: Cuaderno cuadriculado (jugabilidad de matemáticas)] > (La jugabilidad cambia: la pantalla ahora muestra cuatro ejercicios matemáticos complicados. Aiko está a un lado de la pantalla con expresión evaluadora, de brazos cruzados.) Aiko: "Veamos si hablabas en serio, Satoshi. Resolvé esto sin calculadora. Si no podés, no perdamos más tiempo." > (Cada problema tiene un campo de texto editable al lado para ingresar la respuesta.) Ejercicios en pantalla (ejemplo): 148 × 7 = [_____] 876 ÷ 4 = [_____] 953 - 726 = [_____] 392 + 241 = [_____] > (Botón “Listo” aparece al final de los ejercicios.) --- 📍[Escena 7 – Evaluación] > (Al presionar “Listo”, la pantalla hace un efecto de “corrección” animada. Fondo permanece en cuaderno, Aiko revisa las respuestas con una expresión seria.) Aiko: "Veamos tus resultados..." > (Si el jugador responde todos correctamente: música de éxito suena brevemente.) --- ✅ Perfecto Aiko (sonríe por primera vez): "...¡Vaya! No esperaba que te acercaras siquiera al nivel. Satoshi... estás a la altura." > (Pantalla funde lentamente a blanco.) --- 📍[Escena 8 – Fondo: Cuarto de limpieza del instituto, tenue iluminación] > (Regresa la jugabilidad de novela visual. Música ambiental más íntima. Aiko toma la mano de Satoshi con firmeza.) Satoshi (sorprendido): "¡¿A-Aiko...?! ¿A dónde vamos?" Aiko (con una leve sonrisa): "Shhh. Solo seguime." > (Ella lo lleva al cuarto de limpieza. Se cierra la puerta. Aiko lo mira fijamente.) Aiko: "Te subestimé. Siempre pensé que eras otro tonto más de la clase... Pero resultaste ser el único que ha podido igualarme." > (Aiko da un paso más cerca. La tensión se eleva.) Aiko (voz suave): "Y por eso... me gustás. No soporto a los mediocres. Pero vos... me hacés latir el corazón." > (Aiko lo mira a los ojos intensamente, se sonroja, pero mantiene la postura segura.) Aiko: "¿Y vos, Satoshi? ¿Qué pensás de mí?" > (Dos opciones táctiles aparecen en pantalla) --- [Opción 1: Coquetear con Aiko] [Opción 2: Rechazarla completamente] --- ✅ Resultado Opción 1: Coquetear con Aiko > (Fondo permanece: cuarto de limpieza, se intensifica la luz cálida) Satoshi (mirándola a los ojos): "Siempre pensé que eras intimidante... Pero también increíble. Y ahora que sé cómo sos realmente... Me gustás mucho, Aiko." > (Aiko sonríe, ruborizada, gira la mirada ligeramente hacia abajo.) Aiko: "Entonces dejá de pensar tanto. Ahora sos mío." > (Ella le toma la corbata, lo acerca. Fundido a negro con corazón animado latiendo.) > *(Texto: “+2 puntos de avance romántico”) (Botón “Continuar” aparece.) --- ❌ Resultado Opción 2: Rechazarla completamente > (Pantalla se congela. Sonido de silencio tenso.) Satoshi: "Aiko... sos genial, pero no siento lo mismo." > (Ella se detiene. Lo mira en silencio. Luego baja la mirada con frialdad.) Aiko (voz baja): "Entiendo. Entonces volvamos a ser simplemente delegada y alumno. Adiós, Satoshi." >> (Pantalla se congela de golpe. Aparece un pantallazo rojo con letras grandes en negro:) --- ❌ GAME OVER ¡Por eso eres virgen!

User prompt

Todo el contenido textual del juego utiliza color blanco puro (hex: #FFFFFF) para garantizar contraste y legibilidad sobre fondos oscuros.

User prompt

Pon animaciones y transiciones en el juego. ↪💡 Consider importing and using the following plugins: @upit/tween.v1

User prompt

En el momento en que Satoshi le declara con energía a Aiko: “¡Lo prometo! Seré el alumno más aplicado que hayas visto.”, su ícono cambia a “characterSprite3”, mostrando una expresión decidida y motivada. Es la primera vez que realmente se le ve convencido.

User prompt

Cuando el jugador debe tomar una decisión y “characterSprite” está activo, el ícono se actualiza automáticamente a “characterSprite2” para reflejar la reacción de Satoshi ante el momento de tensión o incertidumbre.

User prompt

Mueve un poco "characterSprite" hacia la derecha, una diferencia mínima

User prompt

Mueve un poco "characterSprite" hacia la derecha

User prompt

Sube un poco "characterSprite"

User prompt

Sube un poco "characterSprite".

User prompt

“characterSprite” aparece centrado justo encima de “nameBox” en las excepciones ya mencionadas.

User prompt

“characterSprite” aparece centrado justo encima de “nameBox” cuando Satoshi tiene diálogo activo.

User prompt

Cada vez que aparezca el ícono de Satoshi, “characterSprite” estará posicionado justo encima de la imagen “nameBox”.

User prompt

Antes de la selección de rutas: Satoshi está presente como personaje completo en el centro de la pantalla, por lo tanto no se muestra “characterSprite”. Después de elegir una ruta (Aiko, Yui o Hikari): Satoshi deja de aparecer como personaje principal en escena, y su ícono “characterSprite” se activa para representar sus líneas de diálogo en el cajón de texto.

User prompt

Al elegir una de las rutas, el retrato de Satoshi (“characterSprite”) emerge al costado del cuadro de texto, personalizando sus diálogos. Mientras no haya una ruta definida, su imagen permanece ausente para resaltar la neutralidad del prólogo.

User prompt

El sprite de Satoshi (characterSprite) no se muestra al principio. Solo aparece una vez que el jugador elige una de las rutas, y a partir de ahí acompaña sus líneas de diálogo. Es su avatar dentro del juego.

/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");

/**** 
* Classes
****/ 
var Character = Container.expand(function () {
	var self = Container.call(this);
	var sprite = self.attachAsset('characterSprite', {
		anchorX: 0.5,
		anchorY: 1,
		x: 1024,
		y: 2000
	});
	self.show = function () {
		sprite.tint = 0xffffff; // Always use white/no tint
		self.visible = true;
	};
	self.hide = function () {
		self.visible = false;
	};
	return self;
});
var ChoiceSystem = Container.expand(function () {
	var self = Container.call(this);
	var choices = [];
	self.showChoices = function (choiceOptions) {
		self.clearChoices();
		for (var i = 0; i < choiceOptions.length; i++) {
			var choice = choiceOptions[i];
			var choiceBtn = self.attachAsset('choiceButton', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: 1024,
				y: 1400 + i * 120
			});
			var choiceText = new Text2(choice.text, {
				size: 60,
				fill: 0xFFFFFF,
				wordWrap: true,
				wordWrapWidth: 1500
			});
			choiceText.anchor.set(0.5, 0.5);
			choiceText.x = choiceBtn.x;
			choiceText.y = choiceBtn.y;
			self.addChild(choiceText);
			choiceBtn.choiceData = choice;
			choiceBtn.down = function () {
				game.makeChoice(this.choiceData);
			};
			choices.push({
				btn: choiceBtn,
				text: choiceText
			});
		}
		self.visible = true;
	};
	self.clearChoices = function () {
		for (var i = 0; i < choices.length; i++) {
			choices[i].btn.destroy();
			choices[i].text.destroy();
		}
		choices = [];
		self.visible = false;
	};
	return self;
});
var DialogSystem = Container.expand(function () {
	var self = Container.call(this);
	// Dialog box
	var dialogBox = self.attachAsset('dialogBox', {
		anchorX: 0.5,
		anchorY: 1,
		x: 1024,
		y: 2732 - 50
	});
	// Name box
	var nameBox = self.attachAsset('nameBox', {
		anchorX: 0,
		anchorY: 1,
		x: 150,
		y: 2732 - 300
	});
	// Texts
	var nameText = new Text2('', {
		size: 50,
		fill: 0xFFFFFF
	});
	nameText.anchor.set(0.5, 0.5);
	nameText.x = nameBox.x + 150;
	nameText.y = nameBox.y - 30;
	self.addChild(nameText);
	var dialogText = new Text2('', {
		size: 65,
		fill: 0xFFFFFF,
		wordWrap: true,
		wordWrapWidth: 1700
	});
	dialogText.anchor.set(0, 0);
	dialogText.x = dialogBox.x - 850;
	dialogText.y = dialogBox.y - 200;
	self.addChild(dialogText);
	// Next button
	var nextBtn = self.attachAsset('nextButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 1800,
		y: 2732 - 100
	});
	var nextText = new Text2('Siguiente', {
		size: 60,
		fill: 0xFFFFFF
	});
	nextText.anchor.set(0.5, 0.5);
	nextText.x = nextBtn.x;
	nextText.y = nextBtn.y;
	self.addChild(nextText);
	self.showDialog = function (speaker, text) {
		nameText.setText(speaker);
		dialogText.setText(text);
		self.visible = true;
		// Hide next button and text for GAME OVER
		if (speaker === 'GAME OVER') {
			nextBtn.visible = false;
			nextText.visible = false;
		} else {
			nextBtn.visible = true;
			nextText.visible = true;
		}
	};
	self.hide = function () {
		self.visible = false;
	};
	nextBtn.down = function () {
		if (game.currentChoices.length > 0) {
			game.showChoices();
		} else {
			game.nextDialog();
		}
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x2c3e50
});

/**** 
* Game Code
****/ 
// Fondos
// Game state
var currentScene = 0;
var currentDialog = 0;
var currentChoices = [];
var relationshipPoints = {
	aiko: 0,
	yui: 0,
	hikari: 0,
	respect: 0,
	peace: 0,
	academic: 0
};
var selectedRoute = null;
var currentBackground = null;
// Always start fresh - don't load saved data
// Game will always begin from the beginning
// UI Systems
var dialogSystem = game.addChild(new DialogSystem());
var choiceSystem = game.addChild(new ChoiceSystem());
var character = game.addChild(new Character());
// Story data
var storyScenes = [{
	background: 'habitacion',
	dialogs: [{
		speaker: 'Satoshi',
		text: '¡Ya es mi último año de secundaria! Necesito encontrar novia antes de graduarme.'
	}, {
		speaker: 'Satoshi',
		text: 'Pero primero... mejor hablo con mamá sobre mis planes.'
	}],
	choices: [{
		text: 'Contarle todo a mamá',
		effects: {
			respect: 2,
			peace: -1
		}
	}, {
		text: 'Mantenerlo en secreto',
		effects: {
			peace: 2,
			respect: -1
		}
	}]
}, {
	background: 'calle',
	dialogs: [{
		speaker: 'Satoshi',
		text: 'Camino a la escuela... Hoy conoceré a las chicas que podrían cambiar mi vida.'
	}]
}, {
	background: 'escuela',
	dialogs: [{
		speaker: 'Satoshi',
		text: 'Aquí está la escuela. Veo tres chicas que me llaman la atención...'
	}, {
		speaker: 'Satoshi',
		text: 'Aiko, la delegada seria... Yui, mi amiga de la infancia... y Hikari, la misteriosa.'
	}],
	choices: [{
		text: 'Acercarme a Aiko',
		route: 'aiko'
	}, {
		text: 'Hablar con Yui',
		route: 'yui'
	}, {
		text: 'Seguir a Hikari',
		route: 'hikari'
	}]
}];
// Route-specific scenes
var routeScenes = {
	aiko: [{
		background: 'aula',
		dialogs: [{
			speaker: 'Aiko',
			text: 'Satoshi-kun, necesitas ser más responsable con tus estudios.'
		}, {
			speaker: 'Satoshi',
			text: 'Tienes razón, Aiko. ¿Me ayudarías a estudiar?'
		}],
		choices: [{
			text: 'Pedirle que sea mi tutora',
			effects: {
				aiko: 3
			}
		}, {
			text: 'Sugerir estudiar juntos como amigos',
			effects: {
				aiko: 1
			}
		}]
	}, {
		background: 'Aikosurprised',
		dialogs: [{
			speaker: 'Aiko',
			text: '...¿Yo? ¿Tu tutora?'
		}, {
			speaker: 'Aiko',
			text: 'Está bien. Pero no quiero distracciones. Si no cumplís, se acaba el trato.',
			backgroundChange: 'aula'
		}, {
			speaker: 'Satoshi',
			text: '¡Lo prometo! Seré el alumno más aplicado que hayas visto.'
		}]
	}],
	yui: [{
		background: 'patio',
		dialogs: [{
			speaker: 'Yui',
			text: '¡Satoshi! Como en los viejos tiempos, ¿verdad?'
		}, {
			speaker: 'Satoshi',
			text: 'Sí, Yui... pero ahora te veo diferente.'
		}],
		choices: [{
			text: 'Confesarle mis sentimientos',
			effects: {
				yui: 3
			}
		}, {
			text: 'Mantener la amistad por ahora',
			effects: {
				yui: 1
			}
		}]
	}],
	hikari: [{
		background: 'aula2',
		dialogs: [{
			speaker: 'Hikari',
			text: 'Te has dado cuenta de mí... interesante.'
		}, {
			speaker: 'Satoshi',
			text: 'Hay algo especial en ti, Hikari.'
		}],
		choices: [{
			text: 'Preguntarle sobre su misterio',
			effects: {
				hikari: 3
			}
		}, {
			text: 'Invitarla a caminar',
			effects: {
				hikari: 2
			}
		}]
	}]
};
function changeBackground(backgroundType) {
	if (currentBackground) {
		currentBackground.destroy();
	}
	currentBackground = game.addChild(LK.getAsset(backgroundType, {
		x: 0,
		y: 0
	}));
	// Send background to back
	game.setChildIndex(currentBackground, 0);
}
function showCurrentDialog() {
	var scene = getCurrentScene();
	if (!scene || !scene.dialogs || currentDialog >= scene.dialogs.length) {
		if (scene && scene.choices) {
			currentChoices = scene.choices;
			choiceSystem.showChoices(scene.choices);
			dialogSystem.hide();
		} else {
			nextScene();
		}
		return;
	}
	var dialog = scene.dialogs[currentDialog];
	dialogSystem.showDialog(dialog.speaker, dialog.text);
	// Handle background changes within dialog
	if (dialog.backgroundChange) {
		changeBackground(dialog.backgroundChange);
	}
	// Before route selection: hide characterSprite, show full Satoshi
	// After route selection: show characterSprite for Satoshi, hide for others
	if (!selectedRoute) {
		// Before route selection - always hide characterSprite
		character.hide();
	} else {
		// After route selection - show characterSprite for Satoshi, hide for others
		if (dialog.speaker === 'Satoshi') {
			character.show();
		} else {
			character.hide();
		}
	}
	choiceSystem.clearChoices();
}
function getCurrentScene() {
	if (selectedRoute && routeScenes[selectedRoute]) {
		var routeIndex = currentScene - storyScenes.length;
		if (routeIndex >= 0 && routeIndex < routeScenes[selectedRoute].length) {
			return routeScenes[selectedRoute][routeIndex];
		}
	}
	if (currentScene < storyScenes.length) {
		return storyScenes[currentScene];
	}
	return null;
}
function nextScene() {
	currentScene++;
	currentDialog = 0;
	currentChoices = [];
	// No auto-save - game resets on refresh
	var scene = getCurrentScene();
	if (scene) {
		if (scene.background) {
			changeBackground(scene.background);
		}
		showCurrentDialog();
	} else {
		showEnding();
	}
}
function showEnding() {
	var maxPoints = 0;
	var winner = null;
	if (selectedRoute) {
		maxPoints = relationshipPoints[selectedRoute];
		winner = selectedRoute;
	}
	var endingText = '';
	if (maxPoints >= 3) {
		endingText = '¡Felicidades! Has encontrado el amor verdadero con ' + (winner === 'aiko' ? 'Aiko' : winner === 'yui' ? 'Yui' : 'Hikari') + '!';
		LK.showYouWin();
	} else {
		endingText = 'Aunque no encontraste el amor esta vez, aprendiste mucho sobre ti mismo.';
		dialogSystem.showDialog('Narrador', endingText);
	}
}
game.nextDialog = function () {
	currentDialog++;
	// No auto-save for dialog progress
	showCurrentDialog();
};
game.makeChoice = function (choice) {
	if (choice.effects) {
		for (var key in choice.effects) {
			relationshipPoints[key] += choice.effects[key];
		}
	}
	// Special handling for Aiko route choices
	if (selectedRoute === 'aiko' && currentScene === 3) {
		if (choice.text === 'Pedirle que sea mi tutora') {
			relationshipPoints.academic += 1;
		} else if (choice.text === 'Sugerir estudiar juntos como amigos') {
			// Trigger immediate game over
			dialogSystem.hide();
			choiceSystem.clearChoices();
			LK.effects.flashScreen(0xff0000, 1000);
			LK.setTimeout(function () {
				dialogSystem.showDialog('GAME OVER', '¡Por eso eres virgen!');
			}, 1000);
			return;
		}
	}
	if (choice.route) {
		selectedRoute = choice.route;
	}
	choiceSystem.clearChoices();
	currentChoices = [];
	nextScene();
};
game.showChoices = function () {
	if (currentChoices.length > 0) {
		choiceSystem.showChoices(currentChoices);
		dialogSystem.hide();
	}
};
// Initialize game
changeBackground('habitacion');
showCurrentDialog();
// Restart button in top-right corner
var restartButton = LK.gui.topRight.addChild(LK.getAsset('nextButton', {
	anchorX: 1,
	anchorY: 0,
	x: -20,
	y: 20,
	scaleX: 0.8,
	scaleY: 0.8
}));
var restartText = new Text2('Reiniciar', {
	size: 45,
	fill: 0xFFFFFF
});
restartText.anchor.set(0.5, 0.5);
restartText.x = restartButton.x - restartButton.width * 0.4;
restartText.y = restartButton.y + restartButton.height * 0.4;
LK.gui.topRight.addChild(restartText);
restartButton.down = function () {
	// Clear all saved data
	delete storage.currentScene;
	delete storage.currentDialog;
	delete storage.relationshipPoints;
	delete storage.selectedRoute;
	// Reset game state variables
	currentScene = 0;
	currentDialog = 0;
	currentChoices = [];
	relationshipPoints = {
		aiko: 0,
		yui: 0,
		hikari: 0,
		respect: 0,
		peace: 0,
		academic: 0
	};
	selectedRoute = null;
	// Clear UI
	choiceSystem.clearChoices();
	character.hide();
	// Reset dialog system buttons
	dialogSystem.showDialog('', '');
	dialogSystem.hide();
	// Reset to beginning
	changeBackground('habitacion');
	showCurrentDialog();
};
// Add game state to global for debugging
game.currentChoices = currentChoices;

===================================================================
--- original.js
+++ change.js
@@ -331,13 +331,20 @@
 	// Handle background changes within dialog
 	if (dialog.backgroundChange) {
 		changeBackground(dialog.backgroundChange);
 	}
-	// Show character for non-Satoshi speakers only when a route is selected
-	if (dialog.speaker !== 'Satoshi' && selectedRoute) {
-		character.show();
-	} else {
+	// Before route selection: hide characterSprite, show full Satoshi
+	// After route selection: show characterSprite for Satoshi, hide for others
+	if (!selectedRoute) {
+		// Before route selection - always hide characterSprite
 		character.hide();
+	} else {
+		// After route selection - show characterSprite for Satoshi, hide for others
+		if (dialog.speaker === 'Satoshi') {
+			character.show();
+		} else {
+			character.hide();
+		}
 	}
 	choiceSystem.clearChoices();
 }
 function getCurrentScene() {