Search the Community

Showing results for tags 'sprite'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 700 results

  1. https://gyazo.com/4a44909a40952ac6f5182d328f55d754 I've spent more time than I care to admit figuring it all out. I'm calculating a convex hull around a sprite and then slicing it up into matterjs driven little orc pieces. I'm not very happy with one thing yet. Each of these pieces is a separate Sprite and it has it's own Graphics object as a mask. I feel that if I were to have a couple of these going at the same time rendering could get expensive. Teach me to do better I should be learning react or something to get a dev job, but here I am cutting up orcs.
  2. I'm porting a game developed using Phaser to Roku (streaming box) and I needed to change some of the sprite sheets, so I got TexturePacker but was surprised that it does not have an option to read the json file and split back the sheet into all the separate frames. Then I decided to create a quick app to do that, get the json and the png and unpack the frames png files into a folder. It was very useful to me so I decided to open it to the community: https://github.com/lvcabral/PhaserSpriteSheetUnpacker/releases
  3. So today I come asking for help. I'm converting from a Flash Developer over to JavaScript and I'm using CreateJS, I wanted to know if anyone had recommendations on how I could export my sprite sheets so that it's a little easier to assemble in CreateJS. How I make my characters in Flash is I have the main character MovieClip and I have a nested MovieClip for mouths. The main character MovieClip may have animations so on every frame where the character talks I have a nested mouth clip container(I have provided a video clip on how the animations plays without mouth interaction by code: https://youtu.be/TJOAME7MvgI - and how it acts with interaction: https://youtu.be/XCODle6ocvs). Does anyone know the easiest way to export the animation from Flash and the mouths? I was gonna do the animation on a separate SWF and export it to a separate sprite sheet then for each frame do each set of mouths as a sprite sheet and just show them when it gets to that frame in CreateJS. But how I've been making these so far is the mouths are done by frame on the timeline. In flash I did it like this too but also did them on layers, so if the mouths were on layers it be character.mouths.A_mc.visible = true; and set the last one's visibility to false...if I did it by frame I'd just do character.mouths.gotoAndStop("A"); and this is currently the only way I'm doing in in CreateJS. If anyone has been following along so far lol some suggestions would be great on how you would tackle this!
  4. I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you! I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project. Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like. HTML: <body> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section" section> <img src="book5.png"> </article> </main> <section class="one"> </section> JS: const sectionTag = document.querySelector('section') const articleTags = document.querySelectorAll('article') const bodyTag = document.querySelector('body') const pixels = window.pageYOffset const pageHeight = bodyTag.getBoundingClientRect().height let originalImage = null let originalImageSource = null sectionTag.innerHTML = '' // Set up a pixi application const app = new PIXI.Application({ width: 2000, height: 2000, transparent: true }) // Add the pixi application to the section tags sectionTag.appendChild(app.view) // Make image equall nothing let image = null let displacementImage = null let displacementImage2 = null // Make a new loader const loader = new PIXI.loaders.Loader() // Load in our image loader.add('image', originalImageSource) loader.add('displacement', 'displacement3.jpg') loader.add('displacement2', 'displacement1.jpg') loader.load((loader, resources) => { // Once the image has loaded, now do this image = new PIXI.Sprite(resources.image.texture) displacementImage = new PIXI.Sprite(resources.displacement.texture) displacementImage2 = new PIXI.Sprite(resources.displacement2.texture) image.width = 2000 image.height = 2000 image.interactive = true image.anchor.y = -0.1 displacementImage.width = 1000 displacementImage.height = 1000 displacementImage2.width = 1000 displacementImage2.height = 1000 displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT image.filters = [ new PIXI.filters.DisplacementFilter(displacementImage, 200), new PIXI.filters.DisplacementFilter(displacementImage2, 50) ] // Add the image to the app app.stage.addChild(image) app.stage.addChild(displacementImage) app.stage.addChild(displacementImage2) // add rotation app.ticker.add(() => { displacementImage.x = displacementImage.x + 0.5 displacementImage2.x = displacementImage2.x - 0.5 }) }) articleTags.forEach(article => { document.addEventListener("scroll", function () { if(article.offsetTop - 200 <= pixels){ originalImage = article.querySelector("img") originalImageSource = originalImage.getAttribute("src") } }) })
  5. Ram M

    Graphic

    Hi I want to know the Application for sprite creation for 2d games.Which one is good in quality wise and size also.Any idea about this please share with me.
  6. so I created a spritesheet online and and added to my game. but some sprites are small in size so how do I change the size of sprite: { "filename": "Attack__004", "frame": { "x": 1, "y": 1951, "w": 111, "h": 96 }, "rotated": false, "trimmed": true, "spriteSourceSize": { "x": 9, "y": 5, "w": 111, "h": 96 }, "sourceSize": { "w": 120, "h": 110 }, "pivot": { "x": 0.5, "y": 0.5 } }, I don't know which one is the height and width of image. So do can I resize the image inside the json file or I must manually resize and pack it again? Btw, I used this tool http://free-tex-packer.com/app/ (no PC to use texture packer :-) ) Thanks in advance
  7. Hey guys, I have searched all over to figure this our but no luck. How do I enable the debug to show the bounding/collision boxes on sprites in Phaser 3? this was pretty easy to do in Phaser 2 but I dont see any docs on how to do this for 3. Thanks!!!
  8. Hy everyone, My game ends when the player and the enemy collides. Detecting the collision works fine, the issue is not caused by it. When the game ends I stop the ticker with the .stop() function, is that why I cannot add sprites any more to the stage? (I dont think so because I tested it but still asking). After I stop the ticker I want to add the game-over.png as a sprite which I see in chrome debugger that it is loaded, but it does not appear on the stage. if (isCollision(player.getBounds(), enemy.getBounds())) { app.stage.removeChild(player); app.stage.removeChild(enemy); app.ticker.stop(); PIXI.loader.add('game-over','resources/images/game-over.png').load(ready); function ready(){ let gameOver = new Sprite(PIXI.loader.resources['game-over'].texture); app.stage.addChild(gameOver); } } I played around with setting the coordinates of the sprite too to see if the image may be out of the stage but it did not solve the issue.
  9. Hello everyone, i'm facing an issue pretty weird discovering the melonJS framework following the space invaders tutorial. When i try to implement the player movement actions, i get a problem on the clamp function of the Sprite Object. I'm more from the TypeScript world so not really used to the old way making objects on js, but i verified the melonjs.js file, and the function seems to be implemented well into the object. I use the last release of the boilerplate by the way. Thanks in advance.
  10. Hey, I am Tar van Krieken and I am working on a simple 2d game with a friend of mine. Neither of us are particularly good at graphics however, so we are looking for someone that can create some 2d textures for us and help with the style and theming of the game. We will require sprite animations for entities that walk around and do some other things, as well as textures for blocks and other things in the world. None of the graphics have been done, so it would be entirely up to you. I don't want to give away too much information about the game yet. It is not really a secret, but I would rather not have it on a public forum before we can finish it anyhow. It is roughly a 2d puzzle game similar to lemmings. I don't mind whether it has a pixelated style or not, but I have been working on some things to give the game a 3d feel despite being 2d, so it will have to fit that. Here is a video of some tests I have been doing: https://puu.sh/Bi2bS/e442b24781.mp4 . It makes use of normal maps to create semi 3d lighting, together with shadows that I have been working on: https://github.com/TarVK/pixi-shadows . I can explain how normal maps work if you are interesting in collaborating and don't know this yourself yet. Some of my other work can be found here: https://github.com/TarVK http://ludumdare.com/compo/author/thegunmaster/ As can be understood from this being in the 'unpaid' section, I am not willing to pay anything for the work. After the game is done we will have to decide where to publish it however, so if it turns out we make any money off of it, these profits will be shared of course. But that is a rather unlikely scenario, it will probably end up somewhere for free. Let me know if you are interested in working together, please link me some of your work, and then maybe we can get in touch
  11. Welcome, I am the artist Kirly Senpai!! At the moment I will only draw sprite but soon, I will draw CGs and interface (/^▽^)/ Please e-mail or private messages me if you're interested in any of my services. E-mail: laidinquisition@gmail.com I absolutely do not work for free. Sorry (´。_。`)ゞぅぅぅ… BUT I can work for half payment up front, half payment later, or will installments, I am very flexible! The only payment method that I accept is Paypal. You can also find me in: - Artstation - Portfolio - Devianart - Anothes commissions - Itch.io - Tumblr I have no problem with the genres, I like them all! Bl, yuri, otome, etc ... It is quite cheap!! Take advantage before I change it!
  12. Hi, I'm new with Phaser, I'm wondering how can I create a group of enemies that appears at the side of the screen in a random Y position between 550px and 745 px, after they appear they need to start to fire to my character Right now I have a function to create the bullets and how they will be fired: createBullets:function(laserToFire,track,offsetX, offsetY, bulletDirection,fireRate,bulletSpeed){ weapon = gameSP.add.weapon(10, laserToFire); weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; weapon.bulletSpeed = bulletSpeed; weapon.fireRate = fireRate; weapon.trackSprite(track, offsetX, offsetY); weapon.fireAngle = bulletDirection;right } So what I'm looking to do is to have each one of my enemies within the group to fire to my character. Thanks in advance.
  13. Hi! character in my game is this cat: The cat is class extending group and contains torso and head, both are sprites with arcade physics enable on it. In the game, the cat is pushed up by applying velocity on it and it collects certain items (gameplay is similar to Flip the Gun game, check it out for better understanding). THE PROBLEM: In update method, I am constantly checking for collisionse between cat and the items: this.game.physics.arcade.overlap(this._cat, this._sceneObjectsLayer, this.onObjectCollision, null, this); My onObjectCollision method looks like this: onObjectCollision(cat: Phaser.Sprite, item: GeneratedItem) { console.log("COLLISION SOURCE IS " + cat.key); console.log("COLLISION! OBJECT ID IS " + item.ItemID + "... UPDATE FRAME IS " + this._updateFrameCnt); this._items++; this._UI.showCount(this._items); item.KillItem(); //inside this method I call item.kill() this._sceneObjectsLayer.remove(item); } Basically, it should just update the total amount of items taken in player UI. The problem is that same item is sometimes collected multiple times. That makes sense - one collision for torso, one for head, but I would expect it not to call this method for the same item after item.kill() is called. I already debugged this and I put the variable this._updateFrameCnt to update method. Result is this. You can see that the item with certain ID is collected, then it is killed and after few frames it is collected again like no kill() was called on it: State_game.ts:451 COLLISION SOURCE IS catHead State_game.ts:452 COLLISION! OBJECT ID IS 0... UPDATE FRAME IS 2034 GeneratedItem.ts:52 KILLING ITEM WITH ID 0 //called from item.KillItem //and after few frames: State_game.ts:451 COLLISION SOURCE IS catTorso State_game.ts:452 COLLISION! OBJECT ID IS 0... UPDATE FRAME IS 2040 GeneratedItem.ts:52 KILLING ITEM WITH ID 0 //called from item.KillItem Moreover, this sometimes happens for the same sprite (for example it is called twice for head sprite). Is this expected behaviour due the reasons how Phaser handles physics? Seems really strange for me, I would expect to make physics computation after each frame and therefore no second collision should occur, because the item should be dead at the time. Am I missing something here? Thanks in advance for your responses!
  14. Hey guys, So I've just started refactoring my codebase to Phaser 3 today and I've hit a few bumps. Nothing too bad so far, but one I can't get my head around is how to bring sprites/sprite groups to the front of the display in Phaser 3. In Phaser 2 we had game.world.bringToTop(group), but I'm struggling to find the equivalent in Phaser 3. Any help appreciated, nice one thanks. Sam
  15. I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble? var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} }; var game = new Phaser.Game(config); function preload () { this.load.image('freeplayBG', 'images/freeplay-BG.png'); this.load.image('shark', 'images/nice-shark.png'); this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} ); } function create() { //Set background this.add.image(685, 384, 'freeplayBG'); //Set shark and make draggable var shark = this.add.sprite(200, 300, 'shark').setInteractive(); this.input.setDraggable(shark); this.input.dragDistanceThreshold = 16; this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); //create the bubble sprite var bubble = this.add.sprite(700, 300, 'bubblePop'); console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …} console.log(bubble.animations); // undefined console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …} bubble.animations.add('pop'); //error happens here bubble.animations.play('pop', 10, false, true);
  16. Hello everyone, When I display a sprite in front of a mesh that has emissiveTexture or emissiveColor, the mesh can be seen through the sprite. for example : https://www.babylonjs-playground.com/#4H81K3 Is there a way to occlude the emissive object with a sprite (prevent the emissive mesh to be seen through the sprite)?
  17. Shex

    Image is pixelated

    Hi I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference. The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes. Does anyone have any insight about what's going on?
  18. Hi, I've checked a couple posts on this forum regarding extending classes in Phaser, but get confused on how it exactly works, below is the code I'm trying to implement to add stats to a sprite: class spriteStats extends Phaser.GameObjects.Sprite { constructor (scene, x, y,myExtra) { super(scene, x, y); this.setTexture('../assets/testsprite.png'); this.setPosition(x, y); } setStats(speed, jump){ var stats = { "speed": speed, "jump": jump, } } getStats(){ return stats } } But when I attempt to create the sprite: var hero = this.add.spriteStats(100, 450, 'hero',0).setInteractive(); hero.setStats(5,5); it gives me a: "Uncaught TypeError: this.add.spriteStats is not a function". I don't think I'm extending the class correctly. Please forgive me, as I'm still relatively new to JavaScript. Thanks!
  19. Hello! I'm trying to make a game like raze (flash game from 2010~ish) and I currently have a level import system and moving animated sprite. I am using matter.js for the physics. I am also using phaser 3 v3.12 as tiled hit detection(? idk how to say) breaks in the the newer versions. I saw the demo for angle to pointer (http://phaser.io/examples/v2/arcade-physics/angle-to-pointer#gv) and wondered if something like it existed in Phaser 3. and also, it would be great if i could anchor a sprite onto another moving one (the weapon on the player) as then it would work, but idk how to do it as I couldn't find anything for phaser 3. Thanks for your help, I might not respond right away! AND here is my project link(so i can work on it on the multiple different computers that I have): https://codesandbox.io/s/k0mq2lj533 ~~~~technically I'm copying the code from the "making modular game worlds in phaser 3 part 5" demo, but this is how I get started on projects as I'm not good at setting things up!
  20. Hi everyone. I wanted to see if there was a good tool for creating bitmap fonts for games. One that can get an image created in Photoshop or Illustrator of a custom stylized font character set and create a sprite based bitmap font. I've used Shoebox for a long time, but it hasn't been updated for a few years and it's made in Adobe Air. Is there a more modern and better alternative that doesn't rely on Adobe Air? I've seen other tools that takes windows fonts and let's you create limited styling on them, but that's not what I'm looking for. Any help would be appreciated.
  21. Hey, I got a lot of ES6 classes for my game, so I use a factory, that is hooked into phaser as a plugin. Complete code below. However when I do 'const PLAYER = this.add.player(x,y);' it does not return the player object and the constant PLAYER is null. Can someone help me out here? What am I missing? class ObjectFactory extends Phaser.Plugins.BasePlugin { constructor(pluginManager) { super(pluginManager); pluginManager.registerGameObject('player', this.createPlayer); pluginManager.registerGameObject('overlay', this.createOverlay); } createPlayer(x, y) { return this.displayList.add(new Player({ scene: this.scene, x: x, y: y })); } createOverlay(x, y, w, h) { return this.displayList.add(new Overlay({ scene: this.scene, x: x, y: y, w: w, h: h })); } } Plugin config: plugins: { global: [ { key: 'Factory', plugin: ObjectFactory, start: true } ] }, cheers
  22. Hello I have spine animation created by https://github.com/orange-games/phaser-spine and i need to attach sprite to it. I mean, when spine animation is in action, the sprite (weapon) should move with it. How can i do this?
  23. Hey, when I assign setDepth(number) to Groups and Tilemaps, it seems not to work. Only after setting setDepth(number) on an already added sprite, it works. Any Ideas on it? Complete code below. // Tilemaps already created // # Configure z indexes layer.background.setDepth(0); //dynamic tilemap layer layer.midground.setDepth(1); //dynamic tilemap layer layer.objects.setDepth(2); // group layer.enemies.setDepth(3); // group layer.player.setDepth(4); // group layer.ground.setDepth(5); //dynamic tilemap layer layer.effects.setDepth(6); // group layer.water.setDepth(7); //dynamic tilemap layer //later on const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); //result: SPRITE is not in front of layer.background .. // BUT when I also write: const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); SPRITE.setDepth(0); // Now the sprite is before layer.background... ?
  24. Refer to the playground url below, sprite is in front of the sphere, however the click / pick event triggered on backend sphere first regardless of the sprite's position. Url: https://www.babylonjs-playground.com/#9RUHH#29 Expected result: Player clicked will be triggered instead of Sphere clicked.
  25. I have a sprite of a character moving and I'm trying to apply physics collide on it that when it hits a rock for example health is decreased. I managed to achieve collision but as rectangular shape of the image, what I want to achieve is the collision happens on the boundaries of the character itself. I used PhysicsEditor to generate the JSON file, but I'm still not sure how to use it to achieve pixel perfect collision. Any thoughts?