Ricky

Members
  • Content Count

    16
  • Joined

  • Last visited

  1. Hi, i have a problem with pixijs about images i've created a normal app const app = new PIXI.Application({ width: 1920, height: 1080, antialias: true, resolution: 1, transparent: false }); i'm loading spritesheet and every image is : "sourceSize": {"w":209,"h":195} after that with a simple for i start to show symbols for (let j = 0; j < 5; j++) { const symbol = new PIXI.Sprite(slotTextures[Math.floor(Math.random() * slotTextures.length)]); symbol.anchor.set(0,0); console.log(symbol.width); console.log(symbol.height); reel.symbols.push(symbol); rc.addChild(symbol); } reels.push(reel); but every symbols change size to 298.5714285714286 296 278.5714285714286 How is possible? How can i take the right dimension? Thanks Riccardo
  2. Thanks for your reply and for link, it's really usefull But i solved it adding - background on spritesheet - 1 drawrect - 1 outercircle and 2 function for slide circle moving on Y checking max and min size R.
  3. i'm praying every days for pixi some fiddle 😰 ?
  4. hi, no one is able to suggest me ho to setup a small vertical slider for volume? thanks Rik
  5. i used the second option refactoring all containers an resizing stage. it fit perfectly on every browser thanks guy
  6. Hi guys, someone could help me to find a right way to implement slider for increasing or descreasing volume? i mean vertical slider (sorry i cannot upload screen) like this https://www.i-programmer.info/news/85-humour-/10847-silly-sliders-compete-to-create-the-silliest-volume-control.html thanks
  7. is there some way to convert position value in pixel? For example i know what is the dimension of screen in pixel, i could convert this value in "pixi unit", so moving y value is it a wrong idea?
  8. Another (i don't know if it's stupid) question. My project work fine on desktop and mobile except portrait mode 😢😁 For example, on samsung S6 the footer object it's well positioned, but not on big screen like iphone XS or S8 I'm using coordinate *.position.x or position.y to move this container, but what is the best practice to implement it? I mean, it's not like website with align top or align bottom Thanks for your reply
  9. Ricky

    Flip card

    Thank you for your reply, i've found a solution with tween and 'im also studing card.js
  10. Ricky

    Flip card

    i know, for that i try to find some other solutions, not clean and elegant like card, but in some way efficent for my goal. It's more or less 2 days i'm trying to find some solution without success, unfortunatly
  11. Ricky

    Flip card

    I tryied some ways, first of all using card.js , without success and second way using tween, also without success. I'm asking help to setup some flip card with pixijs, of course i'm newbie Thanks for your time and help
  12. Ricky

    Flip card

    I don't know if i'm worng, but i'm developing it with pixijs
  13. Ricky

    Flip card

    Hi, there are a lot of example about flip card, but i'm not able to find a right solution I'm fighting with this, trying to find a solution using only pixijs without html. So, checking the code below i create a function onCardClick with: this.risiko_table is my container this.card 1 and to are fron and back card onCardClick: function(){ alert("click"); TweenMax.set(this.risiko_table, { transformStyle:"preserve-3d", z:0 }); TweenMax.to(this.card2, 2, {y:"+=180", ease:Power2.easeInOut}); TweenMax.to(this.card, 1, {z:"-=100", yoyo:true, repeat:1, ease:Power2.easeIn}); } in this example, second one it work perfectly but using html https://greensock.com/forums/topic/20670-nine-flipcards/?tab=comments#comment-96707 but it slide down without flip (rotation) (function (){ var body, container, hearts, spades, isTouch; body = $('body'); container = $("<div>"); hearts = $("<div>"); spades = $("<div>"); TweenMax.set(body, {css:{ width:258, height:401, transformStyle:"preserve-3d", perspective: 800, perspectiveOrigin:'50% 50% 0px', backgroundColor:'#000000', 'margin-left':'auto', 'margin-right':'auto' }}) TweenMax.set(container, {css:{ transformStyle:"preserve-3d", z:0 }}); TweenMax.set(hearts, {css:{ backgroundImage:'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/hearts.png")' }}); TweenMax.set(spades, {css:{ backgroundImage:'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/spades.png")', rotationY:-180 }}); TweenMax.set([hearts, spades], {css:{ width:258, height:401, backfaceVisibility:"hidden", position:"absolute",}}) container.appendTo(body); hearts.appendTo(container); spades.appendTo(container); isTouch = ("touchstart" in document.documentElement); enableUI(); function onMouseDown (e){ TweenMax.to(container, 2, {css:{rotationY:"+=180"}, onComplete:enableUI, ease:Power2.easeInOut}); TweenMax.to(container, 1, {css:{z:"-=100"}, yoyo:true, repeat:1, ease:Power2.easeIn}); } function enableUI (){ if(isTouch){ container.one("touchend", onMouseDown); } else { container.one("click", onMouseDown); } } })(); Could you help me? Thanks a lot
  14. this.symbol.filters = [ new PIXI.filters.GlowFilter(50, 2, 3, 0xffffff, 1) ];