syntaxidermy

Members
  • Content Count

    12
  • Joined

  • Last visited

About syntaxidermy

  • Rank
    Member

Recent Profile Visitors

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

  1. How would you read the tint of the button in Phaser? I think there's a way to do it in Phaser 2/HTML5, but not sure Phaser 3 supports this yet.
  2. Thanks for the reply samme, the issue is that I'm trying to load an image onto the loading scene, because my game has a lot of image files to load before the create/update functions can run. The tutorials seem to suggest loading the files inside of the game config variable, but I haven't managed to get this to work.
  3. My image keeps displaying as a green box with a cross through it, even though I'm nearly exactly the same loader event code given in the examples given here and here. My code looks something like this, but for some reason the image is always displayed as a geen box with a line through it, as though it failed to load the image correctly. Any insights as to what this might be? I promise it's not a typo! var config = { type: Phaser.AUTO, width: 1000, height: 600, scene: { preload: preload, create: create, pack: { files: [ { type: 'image', key: 'loading', url: 'assets/laptop.png' } ] } } }; var game = new Phaser.Game(config); function preload () { loading = this.add.image(500, 300, 'loading'); var progress = this.add.graphics(); this.load.on('progress', function (value) { progress.clear(); progress.fillStyle(0xffffff, 1); progress.fillRect(300, 270, 800 * value, 60); }); this.load.on('complete', function () { progress.destroy(); loading.destroy(); }); //...load other files } .
  4. An update here if anybody else is looking for guidance on building menus of the style above, here's what I did to make mine. Hope this helps. This is how it looks from the code below, more or less; With pages: https://imgur.com/TlpNWcJ Here is the relevant code, it's a lot, but I hope that whatever you might need is given somewhere as an example here: function preload () { //bgs this.load.image('bg', 'assets/bg.png'); //bodies this.load.spritesheet('catbody', 'assets/catbody.png', { frameWidth: 297, frameHeight: 397 }); //eye sprites this.load.spritesheet('cateyes', 'assets/catpupils.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catface', 'assets/catface.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catfacegoth', 'assets/catfacegoth.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catfaceshifty', 'assets/catfaceshifty.png', { frameWidth: 297, frameHeight: 397}); //arrows this.load.image('leftarrow','assets/arrowleft.png'); this.load.image('rightarrow', 'assets/arrowright.png'); //tiles this.load.image('tile', 'assets/tile.png'); this.load.image('smalltile', 'assets/tilesmall.png'); //text menu this.load.image('bodytext', 'assets/textbody.png'); this.load.image('eyestext', 'assets/texteyes.png'); this.load.image('toptxt', 'assets/texttop.png'); this.load.image('bottomtxt', 'assets/textbottom.png'); this.load.image('accessoriestxt', 'assets/textaccessories.png'); this.load.image('bgtext', 'assets/textbg.png'); } function create () { tiles = this.physics.add.staticGroup(); arrows = this.physics.add.staticGroup(); smalltiles = this.physics.add.staticGroup(); text = this.physics.add.staticGroup(); this.add.image(500,300,'bg'); //text menu options bodytxt = text.create(500, 170, 'bodytext').setInteractive(); eyestxt = text.create(500, 220, 'eyestext').setInteractive(); toptxt = text.create(530, 270, 'toptxt').setInteractive(); bottomtxt = text.create(530, 320, 'bottomtxt').setInteractive(); accessoriestxt = text.create(530, 370, 'accessoriestxt').setInteractive(); bgtext = text.create(530, 420, 'bgtext').setInteractive(); //arrows leftArrow = arrows.create(650,290, 'leftarrow').setInteractive(); rightArrow = arrows.create(950,290, 'rightarrow').setInteractive(); //colour tile objects red = smalltiles.create(695, 470, 'smalltile').setTint(0x85251B).setInteractive(); orange = smalltiles.create(725, 470, 'smalltile').setTint(0x874E0F).setInteractive(); yellow = smalltiles.create(755, 470, 'smalltile').setTint(0xB2B037).setInteractive(); green = smalltiles.create(785, 470, 'smalltile').setTint(0x4C7940).setInteractive(); lightblue = smalltiles.create(815, 470, 'smalltile').setTint(0x7F9293).setInteractive(); darkblue = smalltiles.create(845, 470, 'smalltile').setTint(0x383A4B).setInteractive(); purple = smalltiles.create(875, 470, 'smalltile').setTint(0x6F5F78).setInteractive(); pink = smalltiles.create(905, 470, 'smalltile').setTint(0xD6A16B).setInteractive(); //player layers player = this.physics.add.sprite(200, 370, 'catbody').setInteractive(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); //playershirt; //playerpants; //playershoes; //playeraccessories; //playerbg; //MENU ICONS //eyes normaleyeicon = this.add.image(735,185,'catface').setScale(0.35).setInteractive(); gotheyeicon = this.add.image(812,185, 'catfacegoth').setScale(0.35).setInteractive(); shifteyeicon = this.add.image(893,185, 'catfaceshifty').setScale(0.35).setInteractive(); //MOUSE INTERACTIONS //click colour tiles red.on('pointerdown', function (pointer, red) { colour = 0x85251B; }); orange.on('pointerdown', function (pointer, orange) { colour = 0x874E0F; }); yellow.on('pointerdown', function (pointer, yellow){ colour = 0xB2B037; }); green.on('pointerdown', function(pointer, green){ colour = 0x4C7940; }); lightblue.on('pointerdown', function(pointer, lightblue){ colour = 0x7F9293; }); darkblue.on('pointerdown', function(pointer, darkblue){ colour = 0x383A4B; }); purple.on('pointerdown', function(pointer, purple){ colour = 0x6F5F78; }); pink.on('pointerdown', function(pointer, pink){ colour = 0xD6A16B; }); //click menu text bodytxt.on('pointerdown', function (pointer, bodytxt) { selection = 1; page =0; }); eyestxt.on('pointerdown', function (pointer, eyestxt) { selection = 2; page = 0; playereyes }); toptxt.on('pointerdown', function (pointer, toptxt) { selection = 3; page = 0; }); bottomtxt.on('pointerdown', function (pointer, bottomtxt) { selection = 4; page = 0; }); accessoriestxt.on('pointerdown', function (pointer, accessoriestxt) { selection = 5; page = 0; }); bgtext.on('pointerdown', function (pointer, bgtext) { selection = 6; page = 0;}); //click item icons normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'faceblink'; playereyes.anims.stop(); playerface.anims.stop(); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'gothblink'; playereyes.anims.stop(); playerface.anims.stop(); }); shifteyeicon.on('pointerdown', function (pointer, shifteyeicon){ facekey = 'shiftyblink'; playereyes.anims.stop(); playerface.anims.stop(); }); //click arrows leftArrow.on('pointerdown', function(pointer, leftArrow){ page -= 1; }); rightArrow.on('pointerdown', function(pointer, rightArrow){ page += 1; }); //ANIMATIONS var keys = ['cat', 'pupil', 'faceblink', 'gothblink', 'shiftyblink']; var spritesheets = ['catbody','cateyes', 'catface', 'catfacegoth', 'catfaceshifty']; for(var i = 0; i < keys.length; i++){ this.anims.create({ key: keys[i], frames: this.anims.generateFrameNumbers(spritesheets[i], { start: 0, end: 13 }), frameRate: 10, repeat: -1 }); } } //end create //custom functions //helper function, sets individual icon to active/visible to inactive/invisible function setActivity(icon, bool){ icon.input.enabled = bool; icon.setVisible(bool); } //Sets each item icon in an array to active/visible or inactive/invisible function setAllActivity(array, bool){ for(var i = 0; i < array.length; i++){ setActivity(array[i], bool); } } //Displays the desired item menu icons as listed in the current page function setJustOne(all, desired, page){ //i = icon category index for(var i = 0; i < all.length; i++){ //j = array for each page of icons for(var j = 0; j < all[i].length; j++){ if(all[i] != desired || j != page){ setAllActivity(all[i][j], false); } if(all[i] == desired && j == page){ setAllActivity(all[i][j], true); } } } } //tints text icon and clears tint from all other text icons function selected(icon, array){ for(var i = 0; i < array.length; i++){ if(array[i] != icon){ array[i].clearTint() } if(array[i] == icon){ array[i].setTint(0xff0000); } } } //plays the animation key given to the player body function playBody(bodyKey){ player.anims.play(bodyKey, true); } //plays the animation key given to the player's face function playFace(facekey){ playerface.anims.play(facekey, true); playereyes.anims.play('pupil', true); } //helper function for menuOptions(). Ensures page index does not go out of bounds. function pageCtrl(page, max){ if(page >= max){ this.page = max; } if (page <= 0){ this.page = 0; } } //When user clicks any text section it triggers displaying of relevant item icons. function menuOptions(selection){ //icon arrays //2D, bodyIcons[0] = first page array, bodyIcons[0][0] = first item on first page var bodyIcons = [ [], [], [] ]; var eyeIcons = [[normaleyeicon, gotheyeicon, shifteyeicon], [], [] ]; var topIcons = [ [], [], [] ]; var bottomIcons = [ [], [], []]; var accessoriesIcons= [ [], [], []]; var bgIcons= [ [], [], [] ]; //3D array //allIcons[0] = bodyIcons, allIcons[0][0] = First page, allIcons [0][0][0] = first elem in first page var allIcons = [bodyIcons, eyeIcons, topIcons, bottomIcons, accessoriesIcons, bgIcons]; //just an array of interactive text objects. var textIcons = [bodytxt, eyestxt, toptxt, bottomtxt, accessoriestxt, bgtext]; //body selection if(selection == 1){ currentobj = player; selected(bodytxt, textIcons); pageCtrl(page, bodyIcons.length); console.log('selection 1 page:' + page); setJustOne(allIcons, bodyIcons, page); } //eyes selection if(selection == 2){ currentobj = playereyes; selected(eyestxt, textIcons); pageCtrl(page, eyeIcons.length); console.log('selection 2 page:' + page); setJustOne(allIcons, eyeIcons, page); } //top section if(selection == 3){ //currentobj = top; selected(toptxt, textIcons); pageCtrl(page, topIcons.length); console.log('selection 3 page:' + page); setJustOne(allIcons, topIcons, page); } //bottom section if(selection == 4){ //currentobj = bottom; selected(bottomtxt, textIcons); pageCtrl(page, bottomIcons.length); console.log('selection 4 page:' + page); setJustOne(allIcons, bottomIcons, page); } //accessories section if(selection == 5){ //currentobj = accessory; selected(accessoriestxt, textIcons); pageCtrl(page, accessoriesIcons.length); console.log('selection 5 page:' + page); setJustOne(allIcons, accessoriesIcons, page); } //bg section if(selection == 6){ //currentobj = bg; selected(bgtext, textIcons); pageCtrl(page, bgIcons.length); console.log('selection 6 page:' + page); setJustOne(allIcons, bgIcons, page); } } var colour = 0x85251B; var selection = 1; var currentobj; facekey = 'shiftyblink'; bodyKey = 'cat' var page = 0; //Game Main function update () { //sprite layers playBody(bodyKey); //body playFace(facekey); //face/ eyes menuOptions(selection); //select section currentobj.setTint(colour); //tint section }
  5. Update: I've fixed the issue! Just in case anybody else comes across this problem, heres how I fixed it: function create(){ //player layers player = this.physics.add.sprite(200, 370, 'catbody').setInteractive().setDataEnabled(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); //menu items normaleyeicon = this.add.image(735,185,'catface').setScale(0.35).setInteractive(); gotheyeicon = this.add.image(815,185, 'catfacegoth').setScale(0.35).setInteractive(); //MOUSE interactions normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; playereyes.anims.stop(); playerface.anims.stop(); console.log('normal face'); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; playereyes.anims.stop(); playerface.anims.stop(); console.log('goth face selected'); }); } function playFace(facekey){ if(facekey == 'catfacegoth'){ playerface.anims.play('gothblink', true); playereyes.anims.play('blink', true); } if(facekey == 'catface'){ playerface.anims.play('faceblink', true); playereyes.anims.play('blink', true); } } function update () { //sprite layers player.anims.play('twitch', true); //body playFace(facekey); //face/ eyes menuOptions(selection); //select section currentobj.setTint(colour); //tint section } Heres how it looks now :
  6. Hi all, Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour. The layers so far are added like so: Cat Body Pupil Face/Eye shape Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct. This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this: This is the relevant code to trigger the event: facekey = 'catfacegoth'; create function; player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');}); update function: player.anims.play('default', true); //body animation if(facekey == 'catfacegoth'){ playerface.anims.play('gothblink', true); // face/eye shape playereyes.anims.play('blink', true); //this is the pupil layer } if(facekey == 'catface'){ playerface.anims.play('faceblink', true); // face/eye shape playereyes.anims.play('blink', true); // pupil } My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame. Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?
  7. I've started to learn game dev using phaser 3 as well. (I'm coming from a background of coding command line applications in C++/Java, web is totally new to me) Looking back on it, I think I might have saved myself some time if I maybe started with phaser 2. But at this point, I've written a lot of my game in phaser 3 so I'm not going to start over now. XD labs.phaser.io is good for finding examples, but the search functionality isn't great. I spend time trying to find examples there basically every day, and slowly I'm learning how Phaser 3 works by doing that. There are still tutorials for Phaser 3, just not as many. Cat Small's one on Code Train is good, there are a few others on the site as well. So, it's very possible if you're willing to devote the time to it! And, I like it. I would love more people to learn it so that we can build a more supportive community. The syntax seems more readable than what I've seen of Phaser 2. In terms of IDE, I write my code in VS code. I like to code there because it can predict the functions/variables available and do things like rename each instance of a variable. To preview/test - I just open the files in firefox using LAMP (Linux) / WAMP (Windows). It's handy to have web dev console, and I like the firefox environment for it. VS code: https://code.visualstudio.com/download WAMP: http://www.wampserver.com/en/#download-wrapper LAMP: https://howtoubuntu.org/how-to-install-lamp-on-ubuntu (With lamp you'll probably have to chmod the www directory to put your code files in it)
  8. The long and short of it is: Phaser 3 has new features, and generally seems nicer, but because it's still pretty new it can be difficult to find examples, documentation, or tutorials. So, I guess it depends how confident you are at making sense of Phaser 3 on your own. There are way more resources out there for Phaser 2.
  9. Hi, I'm working on creating interactive buttons which, when clicked, will set the colour of the player. I've managed to do this successfully, in Phaser 3, but the code is quite bulky and ugly looking. I've just been gathering what examples I can through the website, but I'm certain there must be a better way to do this. Here's what I've got: I think what I want to do is create a class for "smalltiles", but I'm not sure how the inheritance should work for using alongside Phaser 3. I've tried writing something like in several different ways, without success: Does anybody have any insight as to how I might be able to do this better? Thanks for the input in advance.
  10. Thanks! Turns out I was being very daft indeed. I didn't realise that you had to load WAMP files in a browser with 'localhost:/filename'. That solved my issue.
  11. Hi all, I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this: What I have so far is just a test of one of the sprites I put together: mae.mp4 The sprite is made using just one layer, at the moment. Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that. So, examples/tutorials/advice I'm looking for regards: -Building multiple menus of images, each accessible by clicking on relevant category titles. -Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc) -Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time) -How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?) Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too.
  12. I'm having a similar issue with the same part of the tutorial, so I thought I'd comment here. I'm completely new to this as well, just trying to get set up so that I can start doing some practice tutorials. I've also installed the zip file, and copied phaser.js into the WAMP www directory. The code I've used in my index.html file is exactly as given here. When I load the file in Chrome, I get the following error messages and a blank, white page: (See Screenshow below) `phaser.min.js Failed to load resource: phaser.min.js net::ERR_FILE_NOT_FOUNDindex.html:10 Uncaught ReferenceError: Phaser is not defined at index.html:10` I've tried renaming the file to "phaser.min.js" after these error messages, but still no luck. I have no idea what could be going wrong here. Any advice would be greatly appreciated!