Blockwelt

Members
  • Content Count

    4
  • Joined

  • Last visited

About Blockwelt

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Blockwelt

    Star rain

    Wow, thanks a lot, that looks really good! Yeah, you are probably right about the performance cause when i run it my cpu chokes. Thanks for all the comments in the code, I´ll learn from this fore shure!
  2. Blockwelt

    Star rain

    Hi! I´m a beginner regarding js and pixi and trying to learn some game dev at the same time. My aim is a simple space shooter and so far i´ve got a space ship as a animated sprite, i can move it around etc. Next step is a "star rain" that moves along the y axis, like this: https://codepen.io/sevapp/pen/RVWvYJ I´ve just manage to generate static random pixels on the screen, like this: for(let i = 0; i < 100; i++) { starX = Math.floor(Math.random()*app.screen.width); starY = Math.floor(Math.random()*app.screen.height); star.beginFill(0xffffff); star.drawRect(starX,starY,2,2); star.endFill(); } But there is no fun with static stars and i´m to noob to make dem move so should appreciate som help. I decided to try the code from codepen, link above. But having a hard time both understanding everthing that happens in the code and implement it under pixijs. This is how it looks in my implementation: w = app.screen.width; h = app.screen.height; let lprng = (_) => ((_*106 + 1283) % 6075); let stars = { seed: 19465639, dx: [0,w], dy: [0,h], number: 500, speed: 2, color: 0xffffff, side: 2 }; function drawStars(t) { let seed = stars.seed star.beginFill(stars.color); for(let i = stars.number; i--;) { seed = lprng(seed); let x = (stars.dx[0] + lprng(seed)) % (stars.dx[1] - stars.dx[0]); seed = lprng(seed); let y = (stars.dy[0] + lprng(seed) + t * (stars.speed * lprng(seed) / 6075 + 1)) % (stars.dy[1] - stars.dy[0]); console.log(`LogX: ${x}`); console.log(`LogY: ${y}`); star.drawRect( x, y, stars.side * lprng(seed) / 6000 + 1, stars.side * lprng(seed) / 6000 + 1 ); star.endFill(); } } How do i make this work in a pixi-project?. I´m not sure about the ticker an where to call the drawStars function. The way its working now is not at all, its choking the cpu and i dont get any y values, just NaN
  3. Yes, of course. I missed this. I will declare it outside the function. Thanks!
  4. Hi! Can´t figure out how to move a animated sprite. It´s easy with a static sprite but how do i do this with an animated one. In the example i manage to move the text but not the animated sprites. Should appreciate som tips import * as PIXI from 'pixi.js' const app = new PIXI.Application(); document.body.appendChild(app.view); app.loader .add('src/assets/SpaceShip.json') .add('src/assets/alien.json') .load(onAssetsLoaded); function onAssetsLoaded() { const spaceFrames = []; const alienFrames = []; for (let i = 0; i < 2; i++) { const a = i < 2 ? `${i}` : i; const b = i < 2 ? `${i}` : i; spaceFrames.push(PIXI.Texture.from(`SpaceShip${a}.png`)); alienFrames.push(PIXI.Texture.from(`alien${b}.png`)); } const spaceAnim = new PIXI.AnimatedSprite(spaceFrames); const alienAnim = new PIXI.AnimatedSprite(alienFrames); spaceAnim.x = app.screen.width / 2; spaceAnim.y = app.screen.height / 2; alienAnim.x = app.screen.width / 2; alienAnim.y = app.screen.height / 2; spaceAnim.anchor.set(0.5); spaceAnim.animationSpeed = 0.2; alienAnim.anchor.set(0.5); alienAnim.position.x = 400; alienAnim.position.y = 150; alienAnim.animationSpeed = 0.1; spaceAnim.play(); alienAnim.play() app.stage.addChild(alienAnim); app.stage.addChild(spaceAnim); } const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#005f99'], // gradient stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440, lineJoin: 'round' }); const spaceShipHeader = new PIXI.Text("SPACE FREIGHT", style); spaceShipHeader.x = 250; spaceShipHeader.y = 50; app.ticker.add(delta => {gameLoop(delta)}); app.stage.addChild(spaceShipHeader); function gameLoop(delta) { spaceShipHeader.x +=1; } This code just generates a black screen when a add the app.ticker.add line in the onAssetsLoaded function. When i remove the line i can see my animation again. import * as PIXI from 'pixi.js' const app = new PIXI.Application(); document.body.appendChild(app.view); app.loader .add('src/assets/SpaceShip.json') .add('src/assets/alien.json') .load(onAssetsLoaded); function onAssetsLoaded() { const alienFrames = []; for (let i = 0; i < 2; i++) { const a = i < 2 ? `${i}` : i; const b = i < 2 ? `${i}` : i; alienFrames.push(PIXI.Texture.from(`alien${b}.png`)); } const alienAnim = new PIXI.AnimatedSprite(alienFrames); alienAnim.x = app.screen.width / 2; alienAnim.y = app.screen.height / 2; alienAnim.position.x = 50; alienAnim.position.y = 50; alienAnim.animationSpeed = 0.1; alienAnim.play() app.stage.addChild(alienAnim); app.ticker.add(delta => gameLoop(delta)); } function gameLoop(delta) { alienAnim.x += 1; }