Freckles

Members
  • Content Count

    29
  • Joined

  • Last visited

About Freckles

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. @jonforum I tried `document.addEventListener('tap', overBack)` and it didn't work for mobile though with 'click' event it works for web. edit: the problem was that I used event.pageX in overBack function which is undefined on mobile. I changed it to event.touches[0].pageX and it worked. I should've checked that earlier)
  2. I have this line "window.addEventListener('click', overBack);" which works perfectly. When having "window.on('click', overBack)" window is undefined, so I left the first option. But the problem is that "window.addEventListener('tap', overBack);" doesn't do the job. I've tried to replace window with page and screen and it didn't work. So I thought you might help me. How do I refer to the window/screen? Thanks in advance
  3. I set it to 1 and set all the others as 2 but nothing has changed ------------ I solved the problem, thank you for your help
  4. @ivan.popelyshev thanks, I know that the order is important, what I don't get is why the two elements with the same zIndex don't appear at the same time as they did before all of this changes. @themoonrat I don't get a way to shorten the code to send a demo. But basically I have this situation class Input extends PIXI.Graphics { inputFieldStyle; constructor(frame, placholderText, inputFieldStyle) { super(); this.container = new PIXI.Container(); this.addChild(this.container); this.container.sortableChildren = true; this.container.interactive = true; this.inputField = new PIXI.Graphics(); /*some code*/ this.container.addChild(this.inputField); /*I have multiple items like this created and added into the container, including this.background. I also have some callbacks, setters...*/ this.background.zIndex = -1; this.background.alpha = 0; } } export { Input }; ///////////////////////////////////////////////////////////////////////////////////////////////// import { Input } from './modules/input.js'; let app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, antialias: true, transparent: false, resolution: 1, autoDensity: true.width, resizeTo: window, backgroundColor: '0xffffff', }); document.body.appendChild(app.view); let frame0 = new Frame(300, 100, 100, 50); let underlineText = new Input(frame0, 'some text', 'underlineStyle'); app.stage.addChild(underlineText); let frame1 = new Frame(100, 100, 150, 50); let defaultText = new Input(frame1, 'Password', 'defaultStyle'); app.stage.addChild(defaultText); /*Both objects are visible unless I change the alpha property (this.background.alpha = 1 in input.js) in this way I wanted to make sure both of the objects are visible so that I can manage their click events. But only defaultText is visible*/
  5. I did as you advised. I have a 'background' object that has -1 zIndex, so I thought all the other objects would appear on top. When I create one object using the class it's working fine. But when I create multiple objects then the object that was created the last appears on 'background' and the remaining objects are not seen. Did I mess up?
  6. I missed this part: `container.sortableChildren = true` thank you
  7. I have a class that extends PIXI.Graphics and created grapics objects in the class. I give them zIndex-es seperately but they show up as if the last item created is the one that is visible. What can be a problem here?
  8. @jonforum I tried that event as well, but the problem is it's fired just after mousedown so mousedown's callback function doesn't manage to do its job (The file is too big, I can't shorten it to provide a basic playground) I think I will need to go with @Exca's suggestion. I just want to understand how hitarea works. I've read the docs, but I didn't fully understand. I've created input as a module. Do I need to access its parent container from it, which is the app.renderer, or do I create another container in the input module? Thank you all for your help!
  9. Hey guys I have this input fields (they're not finished yet, I use them just for example). When I enter text the cursor goes with it and when I click outside I want to remove the cursor and keep the text obviously. Only mousemove event does the job but that's not suitable in this case. I pass a function that removes the cursor. I tried almost all the events but I don't manage to remove the cursor when I click outside of the input field.
  10. this.cursor = new PIXI.Graphics(); /****some code ****/ this.addChild(this.cursor); setInterval(function () { this.cursor.alpha = 1; //alpha is undefined setTimeout(function () { this.cursor.alpha = 0; }, 500); }, 1000); /*************************************************************************************/ let a = this.cursor = new PIXI.Graphics(); /****some code ****/ this.addChild(this.cursor); setInterval(function () { a.alpha = 1; setTimeout(function () { a.alpha = 0; }, 500); }, 1000); Hey guys, could you please explain why I get ''alpha is undefined'' in the first case and it works alright in the second case? TBH I don't know if this question is pixi related or js related. Also this.realInput.setAttribute( `style`, `position: relative; opacity: 0`, `type`, `password`, ); this.realInput.setAttribute( `inputmode`, `${this.inputMode}` ) //////////////////////////////////////////////////////////////////////////////// this.realInput.setAttribute( `style`, `position: relative; opacity: 0`, `type`, `password`, `inputmode`, `${this.inputMode}` ); Why is the first case working and the second one doesn't, isn't that the same somehow?
  11. @jonforum Could you please tell me why you wrote x.focus() in line 25 https://www.pixiplayground.com/#/edit/XLzHze-cY1pc0XdAFatKW I don't get it as it's called in setTimeout too and works without it as well. I want to make sure I'm not doing a mistake removing line 25.
  12. As for the UI part, it's already done thanks a lot for your help, I'll try to figure it out
  13. thank you @ivan.popelyshev I'd like to get some advice. As I said I've created several styles based on the UI design I've got. And as you told me I can't deal with input using just pixi. Can I use JS for that purpose? Or what exactly would you do in this case? Yet I don't see any problems with desktop version of the project, but invoking the keyboard on mobile is what got me in trouble.
  14. @jonforum the thing is I've already made the appearance of the input field with several styles. And that took a lot of time from me. I don't want to waste that code
  15. I'm trying to make an input module and I need to show the mobile keyboard so that I can go further. I'd appreciate any help)