Comments (9)
halilcakar
commented on June 10, 2024
1
Hey @ebyron15,
I found the problem and fix it for my self. Let me explain to you.
Phaser Input is adding the input element to directly body and if you add your game in another div it's not working.
So for example i change my config like this:
var config = {
width: 1920,
height: 1080,
renderer: Phaser.AUTO,
fullScreenTarget: document.getElementById('core'), // this line is new for me
parent: 'core'
};And also inside phaser-input.js, on var InputElement = .... part, added this instead of this:
document.body.appendChild(this.element);
->
document.getElementById('core').appendChild(this.element);Just cause my parent div is named core.
Cause my config have fullScreenTarget option, It's changing that div which is core div for me.
And cause they are the same directory like same parent div's(i mean canvas and input element) it's working.
I actually wanted to make the change and make a PR for this. But idk how to edit .ts files 😄
I only change the phaser-input.js, so it's not inside .min or .map or .ts files.
Anyway i changed directly on .js build. But Maybe @AleBles could change and make it for us?
from phaser-input.
halilcakar
commented on June 10, 2024
I can confirm this, also having same issue with fullscreen and phaser-input.
from phaser-input.
ebyron15
commented on June 10, 2024
Thanks for sharing this. I don't have a div in my html but I was able to
add the id to the <body> and that worked. Really appreciate the help.
Eric
…On Tue, Nov 27, 2018 at 12:42 AM Halil CAKAR ***@***.***> wrote:
Hey @ebyron15 <https://github.com/ebyron15>,
I found the problem and fix it for my self. Let me explain to you.
Phaser Input is adding the input element to directly body and if you add
your game in another div it's not working.
So for example i change my config like this:
var config = {
width: 1920,
height: 1080,
renderer: Phaser.AUTO,
fullScreenTarget: document.getElementById('core'), // this line is new for me
parent: 'core'
};
And also inside phaser-input.js, on var InputElement = .... part, added
this instead of this:
document.body.appendChild(this.element);->document.getElementById('core').appendChild(this.element);
Just cause my parent div is named core.
Cause my config have fullScreenTarget option, It's changing that div which
is core div for me.
And cause they are the same directory like same parent div's(i mean canvas
and input element) it's working.
I actually wanted to make the change and make a PR for this. But idk how
to edit .ts files 😄
I only change the phaser-input.js, so it's not inside .min or .map or .ts
files.
Anyway i changed directly on .js build. But Maybe @AleBles
<https://github.com/AleBles> could change and make it for us?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#74 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AacAJqc_DmMUaTYiPj2i35wkTGtZZLT8ks5uzBnugaJpZM4YlBhU>
.
from phaser-input.
halilcakar
commented on June 10, 2024
I'm glad that i could help @ebyron15. I hope also they made the changes for us for use properly @AleBles @zBart
from phaser-input.
AleBles
commented on June 10, 2024
@halilcakarr If I understand correctly I can do the following:
- First check if fullscreentarget is set, if so, append input to that element
- If there is no fullscreen target we'll add it to the parent of the canvas
- If all fails we can add it to the body
from phaser-input.
halilcakar
commented on June 10, 2024
Hey @AleBles,
I think with this update, everything will be fine for now.
For the third option u might wanna add a console.warn() that says: update body like this:
<body id="body">referanced from @ebyron15
Edit:
If there is no fullScreenTarget is setted, it's not gonna work anyway. Cause when we request a fullscreen on canvas, it wraps it self with a div, in case our input's gonna be seperated and not gonna work again.
So I believe u might wanna change the docs on this.
Maybe we might offer ppl to use same parent and fullScreenTarget div's for phaser or smt.
@ebyron15 Any idea's ?
Edit-2:
I want to ask if is there javascript version of this repo? I mean with webpack kind of this. If there is i would like to keep working on this repo. Cause there will be a lot person to use this with phaser-ce if only if someone* would keep developing this.
from phaser-input.
halilcakar
commented on June 10, 2024
Hello @AleBles, Is there any news about this ? :)
from phaser-input.
andrewbaranov
commented on June 10, 2024
yeh... we are also waiting for update/fix
from phaser-input.
halilcakar
commented on June 10, 2024
Well @andrewbaranov, i just gave up and go through for phaser-v3, which on version 3.16 is gonna possibly come this week, it has a game.dom object with it.
Check the examples on phaser3-examples
So i'm just waiting to Rich to release version 3.16 and then gonna use that instead.
from phaser-input.
Related Issues (20)
- Input Plugin not working on mobile devices- HOT 14
- BOX STILL DISAPPER!!! HOT 1
- What are the accepted values for font weight? HOT 4
- suggestion to update read me and add couple of signals to improve plugin
- Scroll problem on input text focus HOT 1
- caret position when text > input width HOT 1
- Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas) phaser HOT 1
- Do you planed to make textarea fields type? HOT 1
- Numeric keyboard/input only but show password characters HOT 1
- Text goes to right after typing
- Setting borderWidth to 0 defaults back to 1
- Using Phaser-Input in Phaser 3 Has An Error HOT 4
- Text box still shows up white after changing properties HOT 4
- Phaser 2 Webpack build error HOT 2
- scene deformation HOT 1
- '0' has no input count limit if using InputType.number
- How to create multi-line textfield?
- Disable input
- How to get input field value? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from phaser-input.