WIP: Switch to domkit for dialogue

This commit is contained in:
3wc 2024-02-18 12:25:03 -03:00
parent ed8bc13402
commit 2ad54aa613
6 changed files with 296 additions and 195 deletions

View File

@ -52,3 +52,22 @@ menubutton:hover text {
menubutton:active { menubutton:active {
background: #666; background: #666;
} }
flow.dialogue-container {
fill-width: true;
height: 20;
debug: true;
}
dialogue-box {
fill-width: true;
height: 20;
}
scale-grid#dialogueBackground {
/* fill-width: true; */
}
/* text#dialogueText { */
/* font : url("res/font/minecraftia_regular_6.fnt"); */
/* } */

View File

@ -7,13 +7,8 @@ import scene.GameScene;
import event.EventBus; import event.EventBus;
import event.ChangeSceneEvent; import event.ChangeSceneEvent;
import Const; import Const;
import dialogue.DialogueBox; import listeners.DialogueBoxController;
import dialogue.DialogueManager; import dialogue.DialogueManager;
import dialogue.event.LineShown;
import dialogue.event.OptionsShown;
import dialogue.event.OptionSelected;
import dialogue.event.DialogueComplete;
import dialogue.event.NextLine;
import dialogue.command.OpenRoomCommand; import dialogue.command.OpenRoomCommand;
@:uiComp("game-container") @:uiComp("game-container")
@ -31,24 +26,20 @@ class GameContainer extends h2d.Flow implements h2d.domkit.Object {
} }
class Game extends hxd.App { class Game extends hxd.App {
public var font:h2d.Font; public static var loader = new tiled.Tiled();
public var curDialogue:h2d.Object;
public var options:Array<h2d.ScaleGrid> = [];
public var dialogueManager:DialogueManager;
public var globalEventBus:EventBus;
public static var current:Game; // Current Game (singleton) public static var current:Game; // Current Game (singleton)
var layer:Layers; public var font:h2d.Font;
public var options:Array<h2d.ScaleGrid> = [];
public var dialogueManager:DialogueManager;
public var root:GameContainer; public var root:GameContainer;
public var console:Console; public var console:Console;
public var globalEventBus:EventBus;
var dialogueBoxController:DialogueBoxController;
var layer:Layers;
var style = null; var style = null;
public static var loader = new tiled.Tiled();
override function init() { override function init() {
s2d.scaleMode = Stretch(Const.W, Const.H); s2d.scaleMode = Stretch(Const.W, Const.H);
layer = new Layers(s2d); layer = new Layers(s2d);
@ -62,7 +53,6 @@ class Game extends hxd.App {
root = new GameContainer(); root = new GameContainer();
root.horizontalAlign = root.verticalAlign = Middle; root.horizontalAlign = root.verticalAlign = Middle;
// s2d.add(root);
layer.addChildAt(root, 1); layer.addChildAt(root, 1);
onResize(); onResize();
@ -72,14 +62,13 @@ class Game extends hxd.App {
style.addObject(root); style.addObject(root);
font = Res.font.minecraftia_regular_6.toFont(); font = Res.font.minecraftia_regular_6.toFont();
font.resizeTo(18);
#if debug #if debug
console = new Console(font); console = new Console(font);
layer.addChildAt(console, 4); layer.addChildAt(console, 4);
#end #end
font.resizeTo(20);
globalEventBus = new EventBus(console); globalEventBus = new EventBus(console);
globalEventBus.subscribe(ChangeSceneEvent, onChangeScene); globalEventBus.subscribe(ChangeSceneEvent, onChangeScene);
@ -89,12 +78,15 @@ class Game extends hxd.App {
var yarnFileNames = [hxd.Res.text.intro.entry.name, hxd.Res.text.rooms.entry.name,]; var yarnFileNames = [hxd.Res.text.intro.entry.name, hxd.Res.text.rooms.entry.name,];
dialogueManager.load(yarnText, yarnFileNames); dialogueManager.load(yarnText, yarnFileNames);
globalEventBus.subscribe(LineShown, dialogue);
globalEventBus.subscribe(OptionsShown, renderOptions);
globalEventBus.subscribe(OptionSelected, onOptionSelected);
globalEventBus.subscribe(DialogueComplete, onDialogueComplete);
dialogueManager.addCommandHandler(new OpenRoomCommand(globalEventBus)); dialogueManager.addCommandHandler(new OpenRoomCommand(globalEventBus));
var dialogueParent = new h2d.Flow();
dialogueParent.dom = domkit.Properties.create("flow", dialogueParent);
dialogueParent.dom.addClass('dialogue-container');
style.addObject(dialogueParent);
layer.addChildAt(dialogueParent, 2);
dialogueBoxController = new DialogueBoxController(globalEventBus, dialogueParent, style);
#if debug #if debug
setGameScene(new WorldMapScene(root)); setGameScene(new WorldMapScene(root));
#else #else
@ -116,70 +108,6 @@ class Game extends hxd.App {
style.sync(); style.sync();
} }
function dialogue(event:LineShown) {
if (curDialogue != null) {
curDialogue.remove();
}
var d = new DialogueBox(Const.W, 100, event.line());
d.y = 0;
d.onClick = function() {
globalEventBus.publishEvent(new NextLine());
};
curDialogue = d;
}
function renderOptions(event:OptionsShown) {
for (option in event.options) {
addOption(option.text, option.enabled, function() {
if (option.enabled) {
globalEventBus.publishEvent(new OptionSelected(option.index));
}
});
}
}
function newPanel(w, h) {
var g = new h2d.ScaleGrid(Res.ui.toTile(), 5, 5);
g.width = w;
g.height = h;
g.colorKey = 0xFF00FF;
root.scene.getH2dObject().getScene().add(g, 1);
return g;
}
function addOption(o:String, enabled:Bool, callback:() -> Void) {
var spr = newPanel(Const.W, 60);
curDialogue.addChild(spr);
var tf = new h2d.Text(font, spr);
if (!enabled) {
tf.color = new Vector4(0.5, 0.5, 0.5, 1);
}
tf.text = o;
tf.x = 10;
tf.y = 10;
spr.x = 0;
spr.y = 100 + options.length * 60;
var int = new h2d.Interactive(spr.width, spr.height, spr);
int.onClick = function(_) {
callback();
}
int.cursor = Button;
options.push(spr);
return spr;
}
function onOptionSelected(event:OptionSelected) {
for (o in options) {
o.remove();
}
options.splice(0, options.length);
}
function onDialogueComplete(event:DialogueComplete) {
curDialogue.remove();
}
public function onChangeScene(event:ChangeSceneEvent) { public function onChangeScene(event:ChangeSceneEvent) {
setGameScene(event.newScene); setGameScene(event.newScene);
} }

View File

@ -0,0 +1,135 @@
package components;
import dialogue.event.NextLine;
@:uiComp("dialogue-option")
class DialogueOptionComponent extends h2d.Flow implements h2d.domkit.Object {
static var SRC = <dialogue-option>
<text text={label} public font={Game.current.font} id="labelTxt" />
</dialogue-option>;
public var label(get, set):String;
function get_label()
return labelTxt.text;
function set_label(s) {
labelTxt.text = s;
return s;
}
public function new(label:String, ?parent) {
super(parent);
initComponent();
enableInteractive = true;
interactive.onClick = function(_) onClick();
interactive.onOver = function(_) {
dom.hover = true;
};
interactive.onPush = function(_) {
dom.active = true;
};
interactive.onRelease = function(_) {
dom.active = false;
};
interactive.onOut = function(_) {
dom.hover = false;
};
}
public dynamic function onClick() {}
}
@:uiComp("dialogue-options")
class DialogueOptionsComponent extends h2d.Flow implements h2d.domkit.Object {
static var SRC = <dialogue-options>
${options}
</dialogue-options>;
public var options:Array<DialogueOptionComponent>;
}
@:uiComp("dialogue-box")
class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
var timer:haxe.Timer;
var chan:hxd.snd.Channel;
var textPos:Int = 0;
var game:Game;
static var SRC = <dialogue-box>
<scale-grid id="dialogueBackground">
<text text={displayedText} public font={Game.current.font} id="dialogueText" />
</scale-grid>
</dialogue-box>
public var displayedText(get, set):String;
function get_displayedText()
return dialogueText.text;
function set_displayedText(s) {
dialogueText.text = s;
return s;
}
public var internalText(default, set):String;
function set_internalText(t) {
internalText = t;
timer = new haxe.Timer(30);
timer.run = updateText;
displayedText = "";
textPos = 0;
return t;
}
public function new(text:String, ?parent) {
this.game = Game.current;
super(parent);
initComponent();
internalText = text;
this.dialogueBackground.tile = Res.ui.toTile();
this.dialogueBackground.borderWidth = 5;
this.dialogueBackground.borderHeight = 5;
this.dialogueBackground.colorKey = 0xFF00FF;
this.dialogueBackground.width = this.innerWidth;
this.dialogueBackground.height = this.innerHeight;
// trace(this.dialogueBackground.width);
enableInteractive = true;
interactive.onClick = function(_) onClick();
}
function updateText() {
if (textPos == internalText.length) {
timer.stop();
// onReady();
// if (chan != null)
// chan.stop();
return;
}
// if (chan != null) {
// switch (text.charCodeAt(textPos)) {
// case " ".code, "\n".code:
// chan.volume = 0;
// default:
// if (chan.volume == 0)
// chan.volume = 1
// else
// chan.volume *= 0.9;
// }
// }
textPos++;
displayedText = internalText.substr(0, textPos);
}
public dynamic function onClick() {
if (textPos == internalText.length)
Game.current.globalEventBus.publishEvent(new NextLine());
else if (textPos < internalText.length) {
textPos = internalText.length;
displayedText = internalText;
updateText();
};
}
}

View File

@ -1,107 +0,0 @@
package dialogue;
class DialogueBox extends h2d.Object {
var game:Game;
var bg:h2d.ScaleGrid;
var tf:h2d.Text;
var timer:haxe.Timer;
var int:h2d.Interactive;
public var width(default, set):Int;
public var height(default, set):Int;
public var text(default, set):String;
var textPos:Int = 0;
var chan:hxd.snd.Channel;
public function new(width:Int, height:Int, text:String) {
super();
if (text == null)
text = "NULL";
game = Game.current;
cast(game.root, h2d.Object).getScene().add(this, 1);
bg = new h2d.ScaleGrid(Res.ui.toTile(), 5, 5, this);
bg.colorKey = 0xFF00FF;
tf = new h2d.Text(game.font, this);
tf.y = 5;
tf.x = 7;
tf.dropShadow = {
dx: 0,
dy: 1,
color: 0,
alpha: 0.3
};
int = new h2d.Interactive(0, 0, this);
int.onClick = function(_) click();
this.width = width;
this.height = height;
this.text = text;
}
override function onRemove() {
super.onRemove();
if (chan != null)
chan.stop();
timer.stop();
}
function updateText() {
if (textPos == text.length) {
timer.stop();
onReady();
if (chan != null)
chan.stop();
return;
}
if (chan != null) {
switch (text.charCodeAt(textPos)) {
case " ".code, "\n".code:
chan.volume = 0;
default:
if (chan.volume == 0)
chan.volume = 1
else
chan.volume *= 0.9;
}
}
textPos++;
tf.text = text.substr(0, textPos);
}
public function click() {
if (textPos == text.length)
onClick()
else if (textPos < text.length) {
textPos = text.length;
tf.text = text;
updateText();
};
}
public dynamic function onClick() {}
public dynamic function onReady() {}
function set_text(t) {
text = t;
timer = new haxe.Timer(30);
timer.run = updateText;
tf.text = "";
textPos = 0;
return t;
}
function set_width(w:Int) {
bg.width = w;
int.width = w;
tf.maxWidth = w - 14;
tf.text = text;
return width = w;
}
function set_height(h:Int) {
bg.height = h;
int.height = h;
return height = h;
}
}

View File

@ -40,6 +40,7 @@ class EventBus {
#end #end
return; return;
} }
trace('Publishing event $type');
for (func in listeners.get(type)) for (func in listeners.get(type))
func(event); func(event);

View File

@ -0,0 +1,125 @@
package listeners;
import Game;
import event.EventBus;
import dialogue.DialogueManager;
import dialogue.event.LineShown;
import dialogue.event.OptionsShown;
import dialogue.event.OptionSelected;
import dialogue.event.DialogueComplete;
import dialogue.event.NextLine;
import components.DialogueBoxComponent;
class DialogueBoxController {
public var curDialogue:DialogueBoxComponent;
var game:Game;
var bg:h2d.ScaleGrid;
var tf:h2d.Text;
var int:h2d.Interactive;
var eventBus:EventBus;
var parent:h2d.Object;
var style:h2d.domkit.Style;
public function new(eventBus:EventBus, parent:h2d.Object, style:h2d.domkit.Style) {
this.parent = parent;
this.style = style;
// game = Game.current;
// parent.getScene().add(this, 1);
// bg = new h2d.ScaleGrid(Res.ui.toTile(), 5, 5, this);
// bg.colorKey = 0xFF00FF;
// tf = new h2d.Text(game.font, this);
// tf.y = 5;
// tf.x = 7;
// tf.dropShadow = {
// dx: 0,
// dy: 1,
// color: 0,
// alpha: 0.3
// };
// int = new h2d.Interactive(0, 0, this);
// int.onClick = function(_) click();
eventBus.subscribe(LineShown, dialogue);
// eventBus.subscribe(OptionsShown, renderOptions);
// eventBus.subscribe(OptionSelected, onOptionSelected);
eventBus.subscribe(DialogueComplete, onDialogueComplete);
}
// override function onRemove() {
// super.onRemove();
// // if (chan != null)
// // chan.stop();
// // timer.stop();
// }
public dynamic function onClick() {}
public dynamic function onReady() {}
function dialogue(event:LineShown) {
if (curDialogue != null) {
curDialogue.remove();
}
var d = new DialogueBoxComponent(event.line(), this.parent);
style.addObject(d);
curDialogue = d;
}
// function renderOptions(event:OptionsShown) {
// for (option in event.options) {
// addOption(option.text, option.enabled, function() {
// if (option.enabled) {
// globalEventBus.publishEvent(new OptionSelected(option.index));
// }
// });
// }
// }
//
// function newPanel(w, h) {
// var g = new h2d.ScaleGrid(Res.ui.toTile(), 5, 5);
// g.width = w;
// g.height = h;
// g.colorKey = 0xFF00FF;
// root.scene.getH2dObject().getScene().add(g, 1);
// return g;
// }
//
// function addOption(o:String, enabled:Bool, callback:() -> Void) {
// var spr = newPanel(Const.W, 60);
// curDialogue.addChild(spr);
// var tf = new h2d.Text(font, spr);
// if (!enabled) {
// tf.color = new Vector4(0.5, 0.5, 0.5, 1);
// }
// tf.text = o;
// tf.x = 10;
// tf.y = 10;
// spr.x = 0;
// spr.y = 100 + options.length * 60;
// var int = new h2d.Interactive(spr.width, spr.height, spr);
// int.onClick = function(_) {
// callback();
// }
// int.cursor = Button;
// options.push(spr);
// return spr;
// }
//
// function onOptionSelected(event:OptionSelected) {
// for (o in options) {
// o.remove();
// }
// options.splice(0, options.length);
// }
function onDialogueComplete(event:DialogueComplete) {
curDialogue.remove();
}
}