Freckles

Members
  • Content Count

    29
  • Joined

  • Last visited

Everything posted by Freckles

  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)
  16. Your answer was helpful as always)) thank you!
  17. class Image extends PIXI.Graphics { radius; constructor(points, myHeight, myWidth, myRadius, buttonColor, imagePath) { super(); this.imagePath = imagePath; let image = new PIXI.Sprite.from(imagePath); let w = this.myWidth = myWidth || image.width + 40; let h = this.myHeight = myHeight|| image.height + 20; let r = this.myRadius = myRadius || 5; let bc = this.buttonColor = buttonColor || '0x0000FF'; this.points = points; this.position.set(points[0], points[1]); let myButton = new PIXI.Graphics(); myButton.beginFill(bc); myButton.drawRoundedRect(points[0], points[1], w, h, r); myButton.endFill(); this.addChild(myButton); let buttonTopPadding = (w - image.width) / 2; let buttonLeftPadding = (h - image.height) / 2; image.position.set(points[0] + buttonTopPadding, points[1] + buttonLeftPadding); image.anchor.set(0.5, 0.5); myButton.addChild(image); } set radius(radius){ this.radius = radius; } get radius(){ return this.radius; } } export { Image }; I wrote this code to understand the usage of setters and getters. It creats a button that has icon in the middle. I want to change the radius via setter. I do so and it doesn't work, but console.log(img.radius) results 25. let img = new Image([200, 150], 50, 50, null, '0x034687', './images/close.png'); app.stage.addChild(img); img.radius = 25; console.log(img.radius); I generally want to understand the usage of setters. And if I've added text to a stage how can I update that via setter?
  18. Thanks a lot for clearing this up for me!
  19. let bigRect = new PIXI.Graphics(); bigRect.beginFill('0x00FF00'); bigRect.drawRect(0, 0, 200, 150); bigRect.endFill(); let smallRect = new PIXI.Graphics(); smallRect.beginFill('0xFFFF00'); smallRect.drawRect(0, 0, 190, 140); smallRect.endFill(); let smallRect_x = bigRect.x + (bigRect.width - smallRect.width)/2; let smallRect_y = bigRect.y + (bigRect.height - smallRect.height)/2; smallRect.position.set(smallRect_x, smallRect_y); app.stage.addChild(bigRect); bigRect.addChild(smallRect); bigRect.position.set(100, 100); I want to center smallRect inside bigRect. Why is it working in the code above when positions are set to (0, 0) initially, but wouldn't work if I had any position other than (0, 0) for the bigRect. It's not a problem to set the initial positions to (0, 0) and than change them, I just want to understand how it's working underneath.
  20. Freckles

    Input in PIXI

    ok, thank you I'll try to solve the problem
  21. Freckles

    Input in PIXI

    OK I know it's a renderer. Not complaining at all I just wanted to figure out how to go further in pixi.js. Thank you for the information I've googled but didn't really get what accessability module is in vanilla pixi (I mean whatever I found doesn't really seem to be what I was looking for). I've found this https://github.com/brean/PIXI.DOM.Sprite plugin. Not sure yet if it's compatible with the current version of Pixi. Thanks for your time. I'd be very grateful if you go into details a little bit more 'cause I kinda feel lost. Finding some examples would be awesome too!
  22. Freckles

    Input in PIXI

    From what I've read I need PIXI text input plugin to use that feature. I need to write input text module as I don't want to use plugins. I'd be thankful if you help me out to understand if I can use HTML tags in Pixi.js somehow (Everything's build up on canvas, and I haven't seen any example this far that does so, maybe I'm missing sth) if not could you provide some resources that can help me figure it out? Are there any finished components I can use or do I need to write anything from scratch? (not only input related but also buttons and stuff like that) Thanks in advance!
  23. Thanks a lot, your answer was really helpful
  24. Could you please tell me how to add, the way I tried didn't work
  25. import { UnderlineText } from './underlineText.js'; let Application = PIXI.Application, loader = PIXI.Loader.shared, resources = PIXI.loader.resources, Sprite = PIXI.Sprite, text = PIXI.Text; let app = new Application({ width: window.innerWidth, height: window.innerHeight, antialias: true, transparent: false, resolution: 1, autoDensity: true }); document.body.appendChild(app.view); let underLine = new UnderlineText(null, [100, 385], null, null); app.stage.addChild(underLine); //app.loader.onError.add((error) => console.error(error)); Above is my index.js file. I have the module called UnderLineText. It doesn't work properly as it shows underline but not the text itself. It does count the width of the text, thus displaying the line underneath but I don't know how to make the text visible. Any ideas what I did wrong? P.S. I'm using PIXI js and I'm a newbie. class UnderlineText extends PIXI.Graphics { constructor(text, points, textFontSize, textColor) { super(); let t = this.textFontSize = textFontSize || 12; let s = this.lineWidth = 1; let c = this.textColor = textColor || "0xFFFFFF"; let ut = this.text = text || "Ողջույն"; let textStyle = { fontFamily: 'Arian AMU', fill: c, fontSize: t } let newText = new PIXI.Text(ut, textStyle); this.points = points; points[0] = newText.position.x; points[1]= newText.position.y; this.lineStyle(s, c); this.moveTo(points[0], points[1] + 13); this.lineTo(points[0] + newText.width, points[1] + 13); } } export { UnderlineText };