Jonny Shaw

  • Content Count

  • Joined

  • Last visited

About Jonny Shaw

  • Rank
    Advanced Member

Contact Methods

  • Twitter

Recent Profile Visitors

1694 profile views
  1. Hi all, I'm on the lookout for anyone who would be interested in collaborating on the development of a few PixiJS based games. I've done a fair few now myself but I'm quite pushed for time, I'm more of a designer than a developer & have a small backlog of projects that could do with a helping hand. Ideally I'm looking for someone more on the development side with at least basic graphic design skills needed to take the assets from a psd into the game (prepping atlases, 9 sliced sprites etc), but if you can do more than that all the better! Going forward the games will mainly be built in es6/PixiJSV5, with animation through GSAP & Spine. Example of the type of project we'd be working on below... If you're interested, feel free to drop me a PM and can go over in more detail and discuss rates etc, Cheers!
  2. Hi does anyone know of an easy way to check gpu drawcalls either via the console or a browser plugin? Having a few issues with Spine performance on iOS/Mac and wondering whether it would be worthwhile to merge some atlases. Thanks in advance!
  3. Hah, yeah the thing is with these things, you code, you test, rinse repeat and after a while you lose all sight of whether it's actually any good or not 😆 With the lobby I really wanted to try and make it feel more like a full native game experience. It's not really important in a lot of slots I don't think, but with the needs of this for the leaderboard and IAP's it kind of warranted it really.
  4. Thanks taoprox! I worked solo on this so it did take a good few months in total. The casino has backend developers who were working on a framework that was built around the game, so they were there to help when I maybe struggling with something & of course the good folks on here too 😊 Artwork I generally find easier & always enjoy. Coding I have a very love-hate relationship with, love the eureka moments, but can often feel far & few between! 🤣
  5. Awesome thanks! Oops, not the best choice of screenshots I'll agree, the video is more for my portfolio than as a game trailer which is why it's presented that way. Have updated with more gameplay shots 😊
  6. Hi all, finished this commissioned slot game last year, but just sorting some bits out for my site so thought it maybe worth a post. Artwork & Animation I put most artwork together with a mix of 3DCoat, Blender and Photoshop to finish. Spine was used for the symbol animations, external shop & bonus round animations. GSAP was used for the UI and a few pieces in game. Development My background is more on artwork, but I have worked on the development side of things too, (I started off my freelance work as a UI Designer in Scaleform). Had worked on the previous two games for this client in PixiJS which were used as a testbed to learn the ropes. For the animation I really needed something tangible to work with, so it was decided I would put together a prototype for the game. There were a few things I would do differently now for optimisation, and have since changed in the next slot game I have been working on. PixiJS was quite easy to pick up, and felt very similar to as3 and Flash which I had used quite extensively before on Scaleform projects. One of the challenges I found in particular was that I wanted the game to be playable in both portrait & landscape. So all UI & UX had to conform to this, but was quite pleased on the solution I found for that. The UI was a bit more extensive than I think you'd normally find in slot games too, having leaderboards, a shop for bonus entry IAP's and a secondary UI for mobile deposits. Shoutouts Just want to thank all those on this forum that have helped me with a few things as well whilst I've been learning the ropes too - you've all been awesome and the activity on this forum I find quite incredible! Links Behance Post Prototype Demo Video
  7. Hi all! I've been floating around the forums for a few years now and didn't realise I hadn't posted a plug in here! 🤣 I'm Jonny Shaw, 35, & a freelance artist & designer, based in West Yorks, England. I have a background starting in UI design, but more recently have worked in 2D, 3D, animation, sculpting, & development too. Lately I've mainly been working on a lot of casino games, which also led into development with PixiJS, Spine & GSAP. The last of which ended up being a full game prototype (just minus the comms). Always on the lookout for interesting projects, so if you feel like my work may fit the bill, don't hesitate to give me a holla! Cheers 🍻 Jonny Shaw Website | Facebook | Behance | Artstation
  8. scrap that! had another look .uvs property has changed to regionUVs, works perfectly now! updateRewardFlag(bonusAmount, flagNumber){ window.Game.flags.createFlag(bonusAmount); let meshTexture = window.Game.flags.latestFlag(); let num ='rag1'); let slot =[num]; let attachment = slot.attachment; console.log(attachment); attachment.region.texture = meshTexture; attachment.updateUVs(); if(slot.currentMesh) { console.log(slot.currentMesh); slot.currentMesh.texture = meshTexture; slot.currentMesh.uvs = new Float32Array(attachment.regionUVs); slot.currentMesh.dirty = true; } }
  9. Hi sorry to bump this, but was something I've just been trying out and haven't been able to get it to work if anyone could help? Is this the correct way still to do this. I have an animation of a character with 3 different flags waving (as meshes) and need text on those flags, so thought it would be good to try and renderTexture out dynamically with the base png and text on top, then replace. rendererObject no longer seems to be a property - but have found texture under "region". With the below the texture doesnt appear updateRewardFlag(bonusAmount){ window.Game.flags.createFlag(bonusAmount); let meshTexture = window.Game.flags.latestFlag(); let num ='rag1'); let slot =[num]; let attachment = slot.attachment; attachment.region.texture = meshTexture; attachment.updateUVs(); if(slot.currentMesh !=null) { console.log(slot.currentMesh); slot.currentMesh.texture = meshTexture; slot.currentMesh.uvs = new Float32Array(attachment.uvs); slot.currentMesh.dirty = true; } } if I comment out as below it does appear but massively out of scale and rotated. updateRewardFlag(bonusAmount, flagNumber){ window.Game.flags.createFlag(bonusAmount); let meshTexture = window.Game.flags.latestFlag(); let num ='rag1'); let slot =[num]; let attachment = slot.attachment; attachment.region.texture = meshTexture; attachment.updateUVs(); if(slot.currentMesh !=null) { console.log(slot.currentMesh); slot.currentMesh.texture = meshTexture; //slot.currentMesh.uvs = new Float32Array(attachment.uvs); //slot.currentMesh.dirty = true; } } Any ideas greatly appreciated!
  10. perfect thanks, will stick to Container for now then, and try the other approach if I see any drops
  11. that's awesome thanks Ivan, will take a look at trying that out once this project is done, but might have to hold on for that one as I'm a bit behind already. For the moment I can either have 1 normal container for both emitters, or use 2 particle containers for each with one set to add. For now any idea on which of the two options may give better performance?
  12. Brilliant thanks! Guess that's what I must have been doing previously. One thing with this effect though is I have two emitters, a fire and smoke effect, whereby only the fire needs add, so it wouldn't work in this case. So do you think it would be better to have 2 particlecontainers with just the fire particlecontainer set to add or... just use one normal container for both?
  13. Hi, I've just noticed that the ParticleContainer doesn't seem to support blendModes. I thought previously it had worked when the tint property had been set to true, but may have imagined it. This still a current limitation?
  14. Have managed to get this working, but had to find some workarounds and not sure if it's a bit complex, and could be optimised further... Involved using a timer and a loop to emit manually, then track the last added fireball particles position (if I tried accessing as soon as it was emit, it would return a blank, because it seems emission rate of 0 even for one particle is not possible), so matched the delay to the emission rate and seems to work ok. I'll likely add the particles back into particle containers now to improve performance a bit too. TickerTimer is just a small util class I wrote that adds a callback function to the main app ticker with a delay (so works pretty much like setTimeout, but using the app ticker) Any further ideas greatly appreciated! import TickerTimer from "../utils/TickerTimer"; class Fireballs extends PIXI.Container{ constructor(){ super(...arguments); this.balls = []; this.trails = []; // Atlas... this.atlas = PIXI.loader.resources["./assets/fxAtlas.json"].textures; this.ballContainer = new PIXI.Container(); this.trailContainer = new PIXI.Container(); this.addChild(this.trailContainer); this.addChild(this.ballContainer); this.emitTimer = 0; this.emitRate = 6; this.fireballCount = 0; this.maxFireballs = 20; this.timer = new PIXI.ticker.Ticker(); this.timer.stop(); this.fireballs = new PIXI.particles.Emitter( this.ballContainer, [this.atlas["fireball1.psd"]], { "alpha": { list: [ {value:0, time:0}, {value:1, time:0.2}, {value:1, time:0.8}, {value:0, time:1} ], }, "scale": { list: [ {value:0, time:0}, {value:0.3, time:0.2}, {value:0.4, time:0.8}, {value:0.2, time:1} ], "minimumScaleMultiplier": 1 }, "color": { "start": "#ffffff", "end": "#ff6105" }, "speed": { "start": 800, "end": 1000, "minimumSpeedMultiplier": 1 }, "acceleration": { "x": 0, "y": this.randomRange(1000,2000) }, "maxSpeed": 1000, "startRotation": { "min": 160, "max": 380 }, "noRotation": false, "rotationSpeed": { "min": 500, "max": 2000 }, "lifetime": { "min": 1, "max": 1 }, "blendMode": "add", "frequency": 0.1, "emitterLifetime": 0.2, "maxParticles": 10, "pos": { "x": 0, "y": 0 }, "addAtBack": false, "spawnType": "point" } ); this.timer.add(this.emitLoop,this); this.timer.start(); } emitLoop(deltaTime){ this.emitTimer++; if(this.fireballCount < this.maxFireballs){ if(this.emitTimer >= this.emitRate){ this.emitTimer = 0; this.emitFireball(); } } else { this.timer.remove(this.emitLoop, this); this.emitTimer = 0; this.fireballCount = 0; } } randomRange(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } emitFireball(){ this.fireballCount++; if(this.fireballCount < this.maxFireballs){ this.fireballs.autoUpdate = true; this.fireballs.playOnce(this.fireballDestroyed.bind(this)); //this.fireballs.emit = true; let delayMe = new TickerTimer(this.timer, 0.2, this.createTrailSmoke.bind(this)); } } fireballDestroyed(ball){ this.balls.shift(); this.trails.shift(); } createTrailSmoke(){ let fireball = this.ballContainer.children[this.ballContainer.children.length-1]; // Get the last added fireball. if(fireball!=null){ let trailSmoke = this.createTrail(fireball.x, fireball.y,1); this.balls.push(fireball); this.trails.push(trailSmoke); window.Game.ticker.add(this.updateTrailSmoke, this); } } updateTrailSmoke(){ for(let i = 0; i < this.balls.length; i++){ this.trails[i].updateOwnerPos(this.balls[i].x, this.balls[i].y+20); } } createTrail(xPos, yPos, lifeSpan){ let trail = new PIXI.particles.Emitter( this.trailContainer, [this.atlas["smoke3.psd"]], { "alpha": { list: [ {value:0, time:0}, {value:1, time:0.2}, {value:0, time:1} ], }, "scale": { list: [ {value:0.2, time:0}, {value:0.1, time:0.2}, {value:0.4, time:1} ], "minimumScaleMultiplier": 1 }, "color": { list: [ {value:"#ffff5e", time:0}, {value:"#ff0000", time:0.2}, {value:"#333333", time:0.3}, {value:"#000000", time:1} ] }, "speed": { "start": 0, "end": 0, "minimumSpeedMultiplier": 1 }, "acceleration": { "x": 0, "y": 100 }, "maxSpeed": 0, "startRotation": { "min": 0, "max": 360 }, "noRotation": false, "rotationSpeed": { "min": 0, "max": 800 }, "lifetime": { "min": 0.6, "max": 0.8 }, "blendMode": "normal", "frequency": 0.008, "emitterLifetime": lifeSpan, "maxParticles": 200, "pos": { "x": xPos, "y": yPos }, "addAtBack": false, "spawnType": "point" } ); trail.autoUpdate = true; trail.playOnce(); return trail; } } export default Fireballs;
  15. Aha, silly me see gravity can be simulated with the acceleration, so will try that The only other issue I can see is accessing the fireball particles x,y position but hopefully children on the particle container, should give an option there