1 decade ago
by peepli
Hello,
How to add a textfield or input box in the game? for example I am trying to add a new textfield for the player to enter their name? I read some forums and it said I need to use jQuery to achieve this but I am very new to javascript and other terms in general. How do i achieve this through impact, any example brief code would be really helpful as to where do i actually write the code for a textfield for impact?
1 decade ago
by peepli
Okay I managed to display a text field on the screen but it gets displayed all the time when I start the game. I am not able to hide it in my javascript file. This is the below code I have used to format my index.html file.
I am not sure if this is the right way to do it.
<body>
<canvas id="canvas" width="768" height="704"></canvas>
<div id="canvaswrapper">
<div id="problemdisplay">
<div id="problemform" class="form-inline">
<input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>
<button id="problemsubmit" class="btn" style="display: inline-block;"></button></div>
</div>
<div id="prob_submit_msg" style="display: block;"></div>
</div>
</div>
</body>
Then I added some css style elements on top of this file
like this
<html>
<head>
<title>Impact Game</title>
<style type="text/css">
html,body {
background-color: #333;
color: #fff;
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
font-size: 12pt;
}
#problemdisplay {
position: absolute;
margin-top: 10%;
width: 100%;
}
#problemform {
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 280px 2px 15px 295px;
}
#probleminput {
display: none;
width: 30%;
margin-left: 5.5%;
margin-right: 5.5%;
padding: 25px 1px 2px 2px;
}
something like this
In my main.js file I define a new class and define the below functions
ProblemHide: function(){
var problemInput = $("#probleminput");
var problemSubmit = $("#problemsubmit");
problemInput.hide();
problemInput.val('');
problemSubmit.hide();
},
ProblemDisplay:function() {
var problemInput = $("#probleminput");
var problemSubmit = $("#problemsubmit");
problemInput.show();
problemSubmit.show();
},
and I call something ProblemHide() function in my main game class in the init() but it throws an error saying it cannot recognize #probleminput.
I am not even sure if my approach is right or wrong. Any ideas?
Thanks
1 decade ago
by peepli
Okay I fixed the problem by using a Jquery lib file in my html file.
I can see the text fields and submit buttons now. But the problem now is that I want to display the submit button and text field on a dialog box. But neither the dialog box and the text fields remain static or stable in the scene because my camera follows the player when he moves around in the world and the dialog box and text fields disappear as in they are left behind in their previous position on the screen
How do I make my text fields in CSS relative to my dialog box position in impact js? My dialog box is just another entity. I can fix my players position when I want my dialog box to appear but there will be offset issues again. I want it the box to be centered all the time when a trigger event happens.
If someone could help it would be great! Thanks
1 decade ago
by pussard
If I understand you correctly, I think what you'd need to do is add "position: fixed" to your CSS rule for #problemDisplay.
Page 1 of 1
« first
« previous
next ›
last »
