ixdHenry Posted July 27, 2017 Share Posted July 27, 2017 My issue here is I'm trying to create a countdown timer using fonts and styling of my choice but I don't know how to update the text variable. I want to call the addChild method once and have the value of that string updated in a function. The only way I can see the updated countdown is with the addChild method but at the moment that leaves duplicate copies of the object on the screen. The render does not clear the canvas even though I read in the documentation it's set to do that by default. I tried two methods to get the desired results: var countdown = new PIXI.Text( days+" days "+hours+" hours " +minutes+" minutes "+seconds+" seconds ",timerStyle); countdown.updateText(); timerContainer.addChild(countdown) //tried a second method and that was use to create a sprite from the text textSprite = new PIXI.Sprite(countdown.texture); timerContainer.addChild(textSprite); I did some extensive google searching and I learned that you need to use the function .updateText(); in order for the text variable to actually update. I thought this would work but it does nothing to change the string value on the screen. I have also tried to declare and add the countdown variable to the stage, outside the function but the text does not update. Any suggestions would be greatly appreciated. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 27, 2017 Share Posted July 27, 2017 Hello! UpdateText is used only for texture manipulations that you dont have. In your case update will be that thing: countdown.text = days+" days "+hours+" hours " +minutes+" minutes "+seconds+" seconds "; I advice you to read something about JS itself, like http://shop.oreilly.com/product/9780596805531.do Quote Link to comment Share on other sites More sharing options...
ixdHenry Posted July 29, 2017 Author Share Posted July 29, 2017 But the reason I'm posting in the PIXI section is because I want to update the text using PIXI. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 29, 2017 Share Posted July 29, 2017 And that's the only way to update the text using pixi Quote Link to comment Share on other sites More sharing options...
ixdHenry Posted July 30, 2017 Author Share Posted July 30, 2017 That still doesn't help multiple text objects are created every time the timer is incremented. What other way can I go about adding one text object on the stage and having it dynamically update during render time? The reason I'm seeing multiple copies is probably because I keep adding the object to the stage. function countDown(){ ...//getting the time code //font styling var timerStyle = new PIXI.TextStyle({ fontFamily: 'Times New Roman', fontSize:1000, fontStyle: 'normal', fontWeight: 'light', fill: ['#ffffff'], // gradient }); countdown = days+" days "+hours+" hours " +minutes+" minutes "+seconds+" seconds "; duh = new PIXI.Text(countdown,timerStyle) timerStyle.x = 100; timerStyle.y = 300; timerContainer.addChild(duh); timerContainer.x =timerStyle.x; timerContainer.y =timerStyle.y; timerContainer.scale.x = timerContainer.scale.y =3.7; }, 1000); } Quote Link to comment Share on other sites More sharing options...
themoonrat Posted July 31, 2017 Share Posted July 31, 2017 Create your text object once, and update it via .text = const title = new PIXI.Text('hi'); title.text = 'Changed text'; ixdHenry 1 Quote Link to comment Share on other sites More sharing options...
ixdHenry Posted August 1, 2017 Author Share Posted August 1, 2017 @ivan.popelyshev Ah i see why you suggested I read a java book, I didn't know what a constant was, i thought var was the only way of doing that lol. Useful to use in this situation I see. Thanks @themoonrat for clarifying that, i was able to get the timer going! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 1, 2017 Share Posted August 1, 2017 Books shows only ES5, basic version of JS, you can read something about ES6 later. Here's the book: https://www.dropbox.com/s/dvcdcqpxcpuobk8/[O`Reilly] - JavaScript. The Definitive Guide%2C 6th ed. - [Flanagan].pdf?dl=0 . Dropbox keeps deleteing my links because of copyrights, grab the book and i remove it ixdHenry 1 Quote Link to comment Share on other sites More sharing options...
lloydevans Posted August 1, 2017 Share Posted August 1, 2017 I think the assumption in the original question was that you passed the string to the PIXI.Text constructer by a reference. You can think of strings in JS as being "passed by copy" (unless it's passed as an object with a string property). When you set PIXI.Text.text, a set method is called which updates it with the new string. In addition to that you were also joining multiple variables into a string literal when you created the PIXI.Text instance. So the assumption there was that those variables could be updated with the string literal you defined somehow knowing about that and re-creating itself. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.