Flake

Members
  • Content Count

    23
  • Joined

  • Last visited

Everything posted by Flake

  1. tl;dr Pause, sleep, resume and wake make for a confusing api initially. Also a master pause (logic and audio) would be handy ( I might have missed this though.) After a longish break of game dev I wanted to take a look at Phaser 3. Loving it so far, (Phaser has come such a long way) but I find the pausing/resuming the entire game(logic, animation, sounds) a little confusing. I'm making a master Pause/Play switch. After game.loop.pause() didn't have the desired effect I've switched to game.loop.sleep and awake(). But I'm unsure if this is the intended use for them. Looking forward to the release of this bad boy, continue doing awesome work. Cheers
  2. Sweet! Once again Babylon makes it look easy. Thanks @Sebavan
  3. Hi friends, I searched for a while, but because of the fairly common search terms I might have missed the info I'm looking for in which case I apologies. I want to use seperate/different UVs for diffuse and opacity textures in the StandardMaterial. Is this a thing that is possible, or would I have to modify the source? As always, thanks for using you're precious time to help a pleb like me. let mesh = new BABYLON.Mesh("face", scene); let vertexData = new BABYLON.VertexData(); mesh.material = mat; //set positions, indices, normals vertexData.uvs = normalTextureUVs; vertexData.uvs2 = alphaTexUVs; vertexData.applyToMesh(mesh, 1); let mat = new BABYLON.StandardMaterial('blup', scene); mat.diffuseTexture = new BABYLON.Texture('./thing.png', scene); mat.opacityTexture = new BABYLON.Texture('./alpha.png', scene); mat.uv = vertexData.uvs2; // <<<< This is what I'm looking for :)
  4. Thanks @Sebavan & @Deltakosh , I'll think I'll use the official version and put my Frankenstein material to rest.
  5. It worked ^^ I'm not particularly proud of, nor do I fully understand it.. By I copied the relevant ColourCurve code lines out of PBRMaterial and spliced them into the ShaderMaterial. The result is functional, but not elegant. I'll add the .js file. Maybe It's a useful starting point for someone or it can be used of an example of how NOT to do it Thanks again Sebavan ShaderMatWithCC.js
  6. Thank you for you're detailed explanation Sebavan hehe.. I have no 'material code'. I'm using a vanilla BABYLON.ShaderMaterial. I guess I'll try grab the class off github and add a colour curve into it..
  7. Me again.. still messing around with colour correction. Is it possible to bind a Colour Curve to a non-PBM Material? When I attempt the following I get errors: let mat = new BABYLON.ShaderMaterial("mat", scene, "./assets/shaders/blub", { attributes: ["position", "uv"], uniforms: ["worldViewProjection", "globalScale", "globalOffset", "vCameraColorCurvePositive", "vCameraColorCurveNeutral", "vCameraColorCurveNegative"], needAlphaBlending: true }); var curve = new BABYLON.ColorCurves(); curve.GlobalHue = 200; curve.GlobalDensity = 100; BABYLON.ColorCurves.Bind(curve, mat._effect); // throws Uncaught TypeError: Cannot read property 'setFloat4' of undefined
  8. Thanks for the reply guys. Not a direct mix; rather I want to run shaderA and feed the output into shaderB, and render the result of that. I have to take a closer look at your code, but the helperMaterial" looks promising! I'll post an update, once I've gone through the code.. Also the sphere in the third example looks amazing! Edit 1: I could not get the BABYLONX.ShaderBuilder to behave how I wanted. // avrage m1 and m2 .InLine('result = vec4( m2.xyz*0.5 +m1.xyz*0.5 ,0.0);') // when the alpha was zero, the entire mesh was talk transparent and ghostlike .InLine('result = vec4( m2.xyz*0.5 +m1.xyz*0.5 ,q.0);') // and when the alpha was one, the mesh was fine, but the entire scene was completely back (the alpha component of the clear colour was ignored) Any help is still appreciated, i'll get back to trying around
  9. Shaders are still new to me, so this might be a silly question: Is it possible to chain, or merge shaders? I've got a PBRMaterial which uses the ColorCurves, and a custom shader that generates a texture. I'd love to be able to be able to combine or chain them, so I can have both effects. My initial thought was: 'grab the PBRMaterial and Shader from github, and hack in the properties/functions from my custom shader'. But those files have ~2000 lines of code in them, so if anyone knows an easier approach I'd be grateful. Pseudo code, because one can never be too clear What I've got: ... var mesh = new Mesh(); var materialA = new BABYLON.PBRMaterial("pbrMat", scene); var curve = new BABYLON.ColorCurves(); curve.GlobalHue = 250; materialA.cameraColorCurves = curve; var materialB = new BABYLON.ShaderMaterial("otherMat", scene, "./assets/shaders/otherMat", { attributes: ["position", "uv"], uniforms: ["worldViewProjection", "attribute"] }); materialB.setFloat("attribute", someVar); mesh.material = materialA; // or materialB.. but not both ... What I'd want: var mesh = new Mesh(); var materialA = new BABYLON.PBRMaterial("pbrMat", scene); var materialB = new BABYLON.ShaderMaterial("otherMath", scene, "./assets/shaders/specialMat"); mesh.material.Add([materialA, materialB]); // or mesh.material = materialA.chain(materialB); Thanks for your time!
  10. The cool but also slightly intimidating thing about programming is, that there are so many different approaches one can take to get to the goal. Thanks again Nabroski for the different starting points! In the end I created a shader that mimics Photoshop's Hue, Contrast, Brightness and Saturation settings. It works just the way I wanted. Most of the code was ported from Andrey Postelzhuk's Unity shader. // create the material with default/neutral values // this is then applied to you mesh var material = new BABYLON.ShaderMaterial("colorMatchMat", scene, "./assets/shaders/colorMatch", { attributes: ["position", "uv"], uniforms: ["worldViewProjection", "hue"] }); material.setTexture("textureSampler", new BABYLON.Texture("./assets/app/face.jpg", scene)); material.setFloat("hue", 0.0); material.setFloat("contrast", 0.5); material.setFloat("brightness", 0.5); material.setFloat("saturation", 1.0); // Vertex Shader (nothing happens here) precision highp float; attribute vec3 position; attribute vec2 uv; uniform mat4 worldViewProjection; varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; uniform float hue; uniform float contrast; uniform float brightness; uniform float saturation; vec3 applyHue(vec3 aColor, float aHue) { float angle = radians(aHue); float cosAngle = cos(angle); vec3 k = vec3(0.57735, 0.57735, 0.57735); return aColor * cosAngle + cross(k, aColor) * sin(angle) + k * dot(k, aColor) * (1.0 - cosAngle); } vec3 saturationLerp(float from, vec3 col, float t) { float r = (from + t * (col[0] - from)); float g = (from + t * (col[1] - from)); float b = (from + t * (col[2] - from)); return vec3(r, g, b); } vec4 applyHSBEffect(vec3 startColor) { float _Hue = hue * 360.0; float _Contrast = contrast * 2.0; float _Brightness = brightness * 2.0 - 1.0; float _Saturation = saturation; vec4 outputColor = vec4(startColor, 1.0); outputColor.rgb = applyHue(outputColor.rgb, _Hue); outputColor.rgb = (outputColor.rgb - 0.5) * (_Contrast) + 0.5; outputColor.rgb = outputColor.rgb + _Brightness; float intensity = dot(outputColor.rgb, vec3(0.299, 0.587, 0.114) ); outputColor.rgb = saturationLerp(intensity, outputColor.rgb, _Saturation); return outputColor; } void main(void) { vec3 textureColor = texture2D(textureSampler, vUV).rgb; gl_FragColor = applyHSBEffect(textureColor); }
  11. Heya Nabroski, thanks for the multifaceted response! Unfortunalty lights don't give me the amount of controll I need ( I don't think I can unsaturate mesh with a light) and color curves only apear to work with PBRMaterials I'll look into the Post Processing and post the any results.
  12. Hey everyone, I'm trying to 'color-correct' my scene, and want to adjust the global Hue and Saturation. I came across ColorCurves, but am not sure how to use them. Does this mean I can apply them to the scene, or is this the wrong tool for what I'm trying to accomplish?
  13. Feared as much. And yup, it changes basically every frame. I guess I'll stick to the native vanilla canvas for this project. Thanks again @pongstylin @xerver!
  14. Hi @pongstylin, thx for the reply. Your way works if you want to draw over(or under) the sprite. I'm trying to mix my render order like this. function render (){ graphics.clear(); draw poly draw rect draw image dra line draw rect draw image *about 300 more...}The list chnages dynamically in length, and the positions shift too. That's why I'd like to render the spirte/texture to canvas, instead of adding it as a child.
  15. Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!
  16. Thanks @xerver & @d13! Sorry, I switched the code snippets by mistake . But you guys rocked it anyway, I think I've got it. Just to clarify; I was looking for a less verbose way of accessing the resources after loading them. It appears that these are the shortest ways of doing it: new PIXI.Sprite.fromImage("assets/image.jpg"); //ornew PIXI.Sprite(PIXI.loader.resources["assetKey"].texture); //ornew PIXI.Sprite(resources["assetKey"].texture); // through "var resource = PIXI.loader.resource"cheers
  17. Hello! I've got a question about the v3 assetloader/resourceloader: After loading an asset like such: var loader = PIXI.loader;loader.add('img',"assets/image.jpg");.. can I access the resource with (what I assume is ) the key? Edit: posted it wrong the first time In other words? Is there a way to do this: var sprite = PIXI.Sprite.fromFrame("img");..instead of what I'm doing currently: var sprite = PIXI.Sprite.fromFrame("assets/image.jpg");appreciated as always!
  18. Hi, I'm having issues with everyone's favorite browser: I'm displaying Spine animations in Pixi - which works well except for in IE9. part of the code: PIXI.loader.add('animTest', 'libs/pixiSpine/animTest.json');PIXI.loader.load(function (loader, resources) {walker = new PIXI.spine.Spine(resources.animTest.spineData);}and on on IE9 I receive the following error: SCRIPT5022: The spineData param is required.If I log 'spineData' it's undefined. I've tried one or two polyfills (typedarray.js and es5.js) with no effect.. Since I'm new to web development, I've not sure how to figure out what IE is missing. Thanks!
  19. Works like a charm. Thanks for the help!
  20. Thanks, solved my Issue. FYI: The Starling Atlas example xml is encoded with UTF-16, and doesn't work in Firefox.
  21. Flake

    Phaser + Spine

    I'm also currently trying to get Spline animations running in a html5 game, so i'll re-resurrect the thread. Any Tips on getting the animations running in Phaser are appreciated. @Markus: Are you developing the entire game in Mighty now, or did you only animate in the Editor, and then export the animations for use in another Engine? Cheers
  22. Whoops.. Thanks, for the heads up! Edit: :/ sry to keep this thread open. The example is spread out over too many source files and languages for me to follow.. I just want to get the animation playing in a simple page. I've added pixi and pixi-spine in the header, but as soon as I add the later, I get the following error in line one of pixi-spine: Error: Cannot find module 'pixi.js'I'm new to JS, and not using any build tools.. Are there other libs that I have to add, or am I failing elsewhere. *All files and assets are in the same folder, btw. Edit, Edit: I downloaded the examples project, and get the same error when I run the Spine examples. (the others work fine)
  23. Hi, I'm attempting to get a spine animation running in Pixi: In the examples (http://www.goodboydigital.com/pixijs/examples/12-2/) a '.anim' file is loaded (along with a json). var assetsToLoader = ["data/dragonBones.json", "data/dragonBones.anim"]; However I cant figure out how to export or convert my spine files into this format. (Currently I'm exporting a ".atlas", a ".json" and a ".png") Thanks.