kapu

Members
  • Content Count

    17
  • Joined

  • Last visited

  1. kapu

    SVG and audio [SOLVED]

    AAAhh thank you =) I feel so dumb^^ And yeah, I would like to generate the same SVG with others audio files, probably through json files.
  2. Hi there, I'm looking for a way to display audio with an SVG file withe a web browser. And I don't know how to do so. I found a thread on StackOverflow but I can't comment it, so I started a new thread. So, this webpage seems to be working with this code: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/1999/xhtml" viewBox="0 0 1600 1000"> <defs> <style> :root { background: black } text { fill: white; font: 60px sans-serif; font-weight: 900; text-anchor: middle; pointer-events: none } #about { pointer-events: visiblePainted; } a { fill: #4096EE; } a:hover { text-decoration: underline; } .button:hover { filter: url(#huerot80) } .button:active { filter: url(#huerot50) } #about { font-size: 12px } </style> <filter id="ds"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <feOffset dx="2" dy="2"/> <feComposite in="SourceGraphic" operator="over"/> </filter> <filter id="huerot80" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="80"/> </filter> <filter id="huerot50" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="50"/> </filter> <linearGradient id="stops"> <stop style="stop-color:#4096EE;stop-opacity:1" offset="0"/> <stop style="stop-color:#4096EE;stop-opacity:0" offset="1"/> </linearGradient> <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="fill" xlink:href="#stops" spreadMethod="reflect"/> <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="stroke" xlink:href="#stops" spreadMethod="reflect" gradientTransform="scale(1 -1)"/> <script> function $(sel) { return document.querySelector(sel); } </script> <audio xmlns="http://www.w3.org/1999/xhtml"> <source src="media/bubbles.ogg" type="audio/ogg"/> <source src="media/bubbles.mp3" type="audio/mpeg"/> <source src="media/bubbles.wav" type="audio/x-wav"/> </audio> </defs> <g class="button" transform="translate(600, 200)"> <rect width="400" height="86" rx="16" fill="url(#fill)" stroke="url(#stroke)" onclick="try { $('audio').currentTime=0; } catch(e) {} $('audio').play()"/> <text x="200" y="65" filter="url(#ds)">Click me</text> </g> <g class="button" transform="translate(600, 300)"> <rect width="400" height="86" rx="16" fill="url(#fill)" stroke="url(#stroke)" onmouseover="$('audio').play(); $('audio').loop=true;" onmouseout="$('audio').pause(); try { $('audio').currentTime=0; } catch(e) {} $('audio').loop=false;"/> <text x="200" y="65" filter="url(#ds)">Hover me</text> </g> <text id="about" x="50%" y="50%">This example uses HTML5 audio together with SVG. <a xlink:href="http://soundbible.com/1137-Bubbles.html">Bubbles sound effect</a> recorded by Mike Koenig (<a xlink:href="http://creativecommons.org/licenses/by/3.0/">CC-By</a>). </text> </svg> And when I try to copy/paste it and try it to understand how it works and how to modify it, i get a problem: When I try to trigger the audio (with the click or the hover): TypeError: $(...).play is not a function[En savoir plus] test.html:1:1 TypeError: $(...).pause is not a function[En savoir plus] I tried several things but I couldn't solve this problem and display audio with my web browser (firefox and chromium). Thank's for your help ^^ If you know an other light way to play audio with an SVG file I'm also ready to hear it ^^ Cheers
  3. Hi, I don't know where to find any information about this, so I start here^^ I'm creating a little (serious)game where you can here sound form a body. And I would like to be able to do two things: - one level where the player can choose the type of sound he wants to hear. Like I would like to hear the heart of someone who had heart surgery, and something like a dropdown list with this kind of option (heart surgery, prolapsus, etc.) that would allow him to do so. - the possibility for the player to create a new body with the sounds he wants (and eventually share it). And it would create a new file that could be easily loaded in the web browser, or even in another web page. I have no clue of where I could find this kind of information, and I hope I'm clear ^^ Cheers K.
  4. @Gold Finch thank you, it works when I copy/paste your code, I will try to re-work my code to be able to do it.
  5. Thanks I will try it!
  6. lung = game.add.sprite(game.world.centerX,game.world.centerY, 'lung');; lung.inputEnabled = true; lung.input.pixelPerfectOver = true; if (checkOverlap(stetho,lung)){ vesicular.play(); console.log("lung"); } function checkOverlap(spriteA, spriteB) { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(boundsA, boundsB); } Well, I'm wondering if it's not working because of the Phaser.Rectangle.intersects?
  7. Actually it doesn't work any better =/ It still plays sound in the unwanted area.
  8. @WiLD11 Hey, your tutorial was helpful, but I still have a problem =/ I would like to use a non rectangular sprite, and I don't know how to get this. I tried to vectorize it with inkscape, but I'm maybe doing it wrong? I have interactions with all the rectangle on Phaser. I don't know how to get the right shape for my sprite =/
  9. Thank you. @b10b I don't really get what you mean, I say to phaser: "if I clik on red then play that sound". Is that it? I didn't even know that we could do that. And for the alternative, it sounds good, I will work with overlaps in the game, it's seem to be adequat, but I searched for 'complex' geometry. And i thought that it was possible to draw this kind of pattern on the background/map as an object and says to Phaser: "Hey, the wand and the purple square are overlapping => play the sound". But if not I could use the tips you suggest. @WiLD11, thank you for the idea. It seems that you can give to the button any shape you want. I will watch your cool video about that =).
  10. Hi =) I don't know where to find this information, so I'm asking it to you now. I would like to make a very accurate map/background where there are some areas which plays specific music/sound when we click on it. I guess it would use the same mechanisms as pianos, and I don't know how to do it: a svg map? a tiled map with objects? other options? For example, if I want to use the conductor's wand to play a specific instrument when I click on it, how do I say to phaser: "Hey, at this specific area there is something to do => violin.play();". ![]() GFDL+CC-BY 2.5 Pedro Sanchez on wikipedia
  11. Hi, I would like to know if it is possible to create a function which asks if a sprite (playerA) overlaps with an object from a JSON tilemap without sprite? If my playerA overlaps this invisible object a function would be started. I already tried the overlap function between two sprites and it worked: function onDragStop(sprite, pointer) { if (checkOverlap(playerA,sprite)){ console.log("Overlap!"); } else { console.log("Dropped"); } function checkOverlap(spriteA, spriteB) { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(boundsA, boundsB); } Here is an extract of the JSON tilemap. { "height":10, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"Calque de Tile 1", "opacity":1, "type":"tilelayer", "visible":true, "width":20, "x":0, "y":0 }, { "image":"..\/world.png", "name":"World base", "opacity":1, "type":"imagelayer", "visible":true, "x":0, "y":0 }, { "draworder":"topdown", "name":"First Object", "objects":[ { "gid":1, "height":64, "id":5, "name":"", "rotation":0, "type":"", "visible":true, "width":64, "x":317.52500448109, "y":195.111668757842 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, { "draworder":"topdown", "name":"Second Object", "objects":[ { "gid":1, "height":64, "id":11, "name":"", "rotation":0, "type":"", "visible":true, "width":64, "x":449.212619275898, "y":193.621695658129 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, And I would like to play a sound when the player overlaps an object, and each object would have a different effect. And then I don't know how to specificaly call one object and check if it's overlaping with the player. objects = game.add.group(); objects.enableBody=true; game.load.tilemap('world',"assets/map/world.json",null,Phaser.Tilemap.TILED_JSON); game.load.image('tileset',"assets/world.png"); world = this.add.tilemap('world'); world.addTilesetImage('tileset','tileset'); layer = world.createLayer('Calque de Tile 1'); layer.resizeWorld(); world.createFromObjects('First Object',1,'',0,true,false,objects); I don't knwo if these parts of code are enough to understand what I would like to do? I don't know where to get the informations and documentation about that =/ Any information is welcomed ^^.
  12. kapu

    Game design open-source

    Okay, thanks for your returns @Jammy and @Nesh108 ! I'll trys these softwares, and take more time for Inkscape =) There is also [piskelapp](http://www.piskelapp.com/) for the pixel-art style (but I'm not going to use it for this game I think). Ah, and for mixing the sound, I thought about [audacity](http://audacity.fr/) for wind, walk, etc. Do you know others? About the licences, I'm a bit aware of what exists. This [website](https://choosealicense.com/) is cool about that. I was particulary wondering about different licences for the same game: - CC-BY or the sounds -CC-BY-SA for the assets, sprites, etc. - MIT for the code etc. And how to mix them, just specifying it individualy?
  13. kapu

    Game design open-source

    Hi there, I would like to develop a 2D game using my laptop under linux, and phaser. In order to design the map I think I will use Tiled, but what about the sprites, heroes, etc? I saw that Inkscape was a good software fot his, but I'm more used to GIMP, would it be a good way to draw characters, trees, etc? Or is there other goods, open-source softwares? And I would like to make my game open-source, where could I see which licenses I can use?
  14. Thank you @Nesh108 ...... it woooorks! I can jump all around in my new game!!! What a stupid mistake! ^^"
  15. The W letter doesn't change a thing =/ And yes I clicked on the play button several times but it stays in the update loop =/ And nothing happens. And thank you so much to take that time for me! I uploaded the files on a gitlab instance: https://framagit.org/kapu/jeu_JS (I don't know how you usualy do it on this forum?). The code I was showing you is the Level1.js in the js folder. Thank you again @Nesh108 !