alwayzambitious Posted January 7, 2017 Share Posted January 7, 2017 //Aliases let Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, loader = PIXI.loader, resources = loader.resources, Sprite = PIXI.Sprite; // Create the stage and renderer let stage = new Container(), container = new Container(), renderer = autoDetectRenderer(1200, 750,{backgroundColor : 0x1099bb,antialias: false, transparent: false, resolution: 1}); document.body.appendChild(renderer.view); stage.addChild(container); //Load image loader.add("img/bg_featured_med.jpg").load(function () { let bgSprite = new PIXI.Sprite(resources["img/bg_featured_med.jpg"].texture) // var slide = background(container, new PIXI.Sprite.fromImage("img/bg_featured_med.jpg"),'cover'); //var slide = background(container, bgSprite,'cover'); //console.log(slide); console.log(bgSprite); container.addChild(bgSprite); }); // start animating animate(); function animate() { requestAnimationFrame(animate); //render the container renderer.render(stage); } function background(bgSize, inputSprite, type, forceSize) { var sprite = inputSprite; var bgContainer = new PIXI.Container(); var mask = new PIXI.Graphics().beginFill(0x8bc5ff).drawRect(0,0, bgSize.x, bgSize.y).endFill(); bgContainer.mask = mask; bgContainer.addChild(mask); bgContainer.addChild(sprite); var sp = {x:sprite.width,y:sprite.height}; if(forceSize) sp = forceSize; var winratio = bgSize.x/bgSize.y; var spratio = sp.x/sp.y; var scale = 1; var pos = new PIXI.Point(0,0); if(type == 'cover' ? (winratio > spratio) : (winratio < spratio)) { //photo is wider than background scale = bgSize.x/sp.x; pos.y = -((sp.y*scale)-bgSize.y)/2 } else { //photo is taller than background scale = bgSize.y/sp.y; pos.x = -((sp.x*scale)-bgSize.x)/2 } sprite.scale = new PIXI.Point(scale,scale); sprite.position = pos; return bgContainer; } Hello! Ive tried to console log everything within the anon function after the image loads. Even tho nothing traces is null, im not able to get the image show onscreen. Can I get a second pair of eyes to see what the issue? Thanks Quote Link to comment Share on other sites More sharing options...
alwayzambitious Posted January 7, 2017 Author Share Posted January 7, 2017 Nevermind, I figured it out, I forgot to render the stage.. Thanks! Resuming my PIXI journey now... 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.