Search the Community

Showing results for tags 'custom'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 22 results

  1. I am new to Babylon and I have some knowledge about unity shaders but I am not sure how can I create shaders for Babylon, can any one suggest me any tool or any link which can help me to design or create some beautiful Shaders for Babylon. as BabylonJs Object's material, as we have shader forge available for unity, can any one suggest me a tool for WebGL shader create tool? that will be your good help for me, I am getting frustrated and need extream help from Babylonjs Community.
  2. Hey Folks! For my custom Shader I want to use the object's normals in view space. Therefor I need the gl_NormalMatrix. I know how to construct it (inverted and transposed MVMatrix) but I don't want to construct it manually for each object. I found this thread [SOLVED] - Shader Programs Attributes And Uniforms, but there was no hint on how the gl_NormalMatrix is called in babylon. I also searched the babylon git-repository, but could not find where the shader attributes and such are declared. Can anyone please point me in the right direction? Thank you for your time -Mainequin
  3. Character Customization Idea

    I have this idea for creating a character customization system. The system would be implemented as follows. 1) Organize a base template sprite sheet with character components arranged in a composition for future compositing. Example: Lets assume a full body template for a characters design is 125 by 125 consisting of head, body, and leg components. The head component of the character would use 25 pixels and would be isolated on separate parts of the sprite sheet that occupies the respective pixels while the rest of the 100/125 pixels are blank. The same would be done for the body and leg components. 2) Bind the components together via some sort of linked list or maybe even graph based implementation. I'm still learning about graphs and am thinking they're best for this system given compositing more complex sprite sheets will involve layers. Any advised implementations or any kind of information on graphs associated with player creation systems is highly appreciated. I think this is a great opportunity to practice graphs. 3) Next there will be an interface that allows the player to choose the color and textures of each of these components. The player will confirm and submit their design when finished. Now that the player has submitted their design, I'm a bit puzzled about the next step and have a few ideas on composing the data. 4a) Use Phaser api to turn the data into bitmaps? I don't know much about this implementation yet since I'm still learning how to utilize bitmaps and how Phaser handles bitmaps 4b) Composite the items on a canvas and store it in a uri using the canvas to url method. I also lack experience with api but I definitely can see how it would work. 5) Ideally I'll save the data to a database and retrieve them via player credentials. I'm not sure if I'm over complicating things or not so any feedback would be appreciated. I use Phaser but any html5 based idea or solution should be fine.
  4. Shadows in Custom Shader

    Dear Babylon JS community, we as a company have decided, that we want to use Babylon JS for a larger project. For this we have specific requirements for what the shaders have to be able to do. I will first state the problem I am trying to solve and then give the context, for possible alternative solutions. PROBLEMS: For our more complex shader computations we want to integrate shadows from at least one shadow-generator in a custom shader. For reasons of confidentiality I can not submit our current project code, that is why I created this test playground: We want to get the influence of all shadows on a fragment as a float value in the shader for further computations. For this we encountered the following problems: - Mapping to shadow-map coordinates seems to be wrong - using functions like computeShadow() from #include<shadowsFragmentFunctions> yields not-declared-error - computeShadow() yields always 1.0 as a result COURSE OF EVENTS: We started playing around with the standart material and shadow generators and quickly got them to work. we wrote a small utility function for setting up the shadow generators, which you can find at the top of the linked playground code. After this we played around with uploading textures into our custom shaders and were able to create the desired effects. We looked into uploading the shadow-map and the shadow-generator parameters into the shader, which was sucessful. You can find the uploads at line 113-115 of the linked playground code. Since we do not want to write the mapping to shadow map coordinates ourselves, we looked if there is already existing code, which we found in the shadowsVertex.fx, shadowsFragment.fx and shadowsFragmentFunctions.fx files. While trying to get the mapping right, we encountered the aformentioned problems. We were not able to get correct results regarding the shadow-uv-coordinates, shaderincludes like the above mentioned #include<shadowsFragmentFunctions> yields a "computeShadow() has not been declared" error when used in the code after the statement and what code we currently copied from these files seems to always yield 1.0 as a result for the sha- dow intensity. We are turning to you now, because we are at a point where we cannot find the errors in our approach/code anymore. We are required to use Babylon JS version 2.5 in our project. Although it didn't seem to make a difference for the shader code we looked through I wanted to mention it. CONTEXT: Our scene is basically shadeless, with multiple materials per object, distributed via a mask. Therefor we combine a precomputed light texture (for individual objects) with a diffuse texture and multiple material textures blended via a mask texture. Since we require no lighting computation we just want the shadow values to get some visual depth in the scene. Therefor the standart material seems to be not sufficient for our purposes, hence the reliance on a custom shader. I saw code that created a custom material with the standart shaders and then re- placed parts of the vertex and fragment code via a function. We would be ready to do this kind of code insertion, if it yields correct shadow information. Sadly I cannot find the example project for this anymore, so if you could provide a link to a simmiliar source it would be much appreciated. Thank you sincerely for your time and help With best regards from the green heart of Germany The Mainequin Team
  5. How do you extend Phaser.Weapon?

    Hi there, I want to extend Phaser.Weapon so I can create my own custom weapons. I know that you extend groups by using Weapon.SingleBullet = function (game) {, game,, 'Single Bullet', false, true, Phaser.Physics.ARCADE); return this; }; Weapon.SingleBullet.prototype = Object.create(Phaser.Group.prototype); Weapon.SingleBullet.prototype.constructor = Weapon.SingleBullet; But what about the weapons group? Are there any examples out there for this? EDIT: I used Weapon.SingleBullet.prototype = Object.create(Phaser.Weapon.prototype); and it seems to work. However, when I try to fire my bullet I get the following error Cannot read property 'getFirstExists' of null at (phaser.js:101053)
  6. How to access bullets in collide function?

    So I'm currently following @rich 's Shoot-em-up tutorial from over here Please have a look at the source code if you haven't already. From what I understand he create's a weapon array that holds all the weapon types (each of which are an object inside a Weapon object). Now my question is How do I access the current weapon bullets in game.physics.arcade.collide? I've used game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies) and this works fine, the bullets and the enemy collide well. BUT what if I want to kill that bullet? How would I pass the specific bullet that collided with the enemy into a function? This is what I've tried: game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies, function(bullet, enemy) { bullet.kill(); }, null, this); However the above code doesn't work. Bullet is undefined. What do I do?
  7. I know that I need to use .buttonMode = true and .defaultCursor = "inherit", but I want to change the cursor to an image (like in CSS). defaultCursor = "url(" doesn't seem to be working. How can i achieve this?
  8. hi, I would make a custom function to have tween more simple. I would have readable params in the function because i have a lot of value. i could do : function transition (obj,xbegin,ybegin,easing,delay,time....) //but it become difficult to read transition(player,100,100,Phaser.Easing.Linear.None,100,2000,...) but it become difficult to read. I put below a short example of what i would do : function transition(xbegin=x_begin) { console.log(x_begin) } transition(xbegin=100)//but that don't work because xbegin is undefined here the jsfiddle : Thanks.
  9. Adding custom properties

    Hello, I ask this with some caution, obviously, since Mesh instances are fairly rich with "property" content as it stands. I'd like to add a couple of custom properties to help some client application code determine whether a mesh is "selectable" or not. I wonder how to go about doing this and keep a sane boundary between the rich existing properties and the application properties. First if it's even possible, in the face of operations like "clone", etc. As a strategy, for instance, I see naming conventions such as "CamelCase" or "camelCase", with or without leading "_underScores", and things of this nature, to provide some semblance of separation between so-called "public" and "private" concerns, as far as one can do so with JavaScript, at any rate. One thought is that I might run with a "__doubleUnderScore" to keep things further separate, but I wondered if there were commonly adopted strategies among the community for such as requirement. Thank you! Regards, Michael Powell
  10. High Quality Audio

    Hey, thanks for taking a look. I´m offering highly professional sounding music with a unique touch for your project. If you are interested, then please check out my work here: Get in touch via nice-noise(at) Cheers, Mo
  11. Hi, I'm trying to customize the camera inputs, but camera.inputs property is undefined. I am using the ArcRotateCamera, nothing custom. Anyone had this issue before? Suggestions? Cheers
  12. Extending an extended class

    Hello! I'm having a hell of a time trying to create different bullet types in my game (and this problem extends to different weapon types, enemy types, etc.). I know how to extend Sprite, and I have done so to make a base bullet class. However, I can't seem to figure out how to extend that class to make bullets that behave differently. For example: I have a weapon of type Pistol that will shoot bullets of type BulletPistol, and a weapon of RocketLauncher that will shoot bullets of type BulletRocket. The form is like a typical bullet, while the latter will start moving slowly, then accelerate. My thinking is that for the base Bullet class, I can put in all of the default behavior. For BulletPistol, and any other weapons that use this behavior, I merely pass in the sprite I want to use. For BulletRocket, I will need to override the update function (at least) to change how the rocket moves. Here is the code in my Bullet.js file: var Bullet = function(game, key) { console.log("Bullet.prototype");, game, 0, 0, key); this.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST; this.anchor.set(0.5); this.checkWorldBounds = true; this.outOfBoundsKill = true; this.exists = false; this.tracking = false; this.scaleSpeed = 0; }; Bullet.prototype = Object.create(Phaser.Sprite.prototype); Bullet.prototype.constructor = Bullet; = function(x, y, angle, speed, gx, gy) { gx = gx || 0; gy = gy || 0; this.reset(x, y); this.scale.set(1);, speed, this.body.velocity); this.angle = angle; }; Bullet.prototype.update = function() { console.log("Bullet.prototype.update"); if (this.tracking) { this.rotation = Math.atan2(this.body.velocity.y, this.body.velocity.x); } if (this.scaleSpeed > 0) { this.scale.x += this.scaleSpeed; this.scale.y += this.scaleSpeed; } }; //////////////////////////////////////////////////////////// // PISTOL //////////////////////////////////////////////////////////// var BulletPistol = function(game) { console.log("Bullet.Pistol.prototype");, 'img_BulletPistol'); }; BulletPistol.prototype = Object.create(Bullet.prototype); BulletPistol.prototype.constructor = BulletPistol; = function(x, y, angle, speed, gx, gy) { // }; BulletPistol.prototype.update = function() { console.log("Bullet.Pistol.prototype.update"); }; Here are the error messages and console logs I get when I load my game: I'm not sure what I'm doing wrong, exactly. I went through 11 pages on this forum and several more on Google, but the closest things I could find to what I'm attempting were written in other languages. Any insight on how to extend an extended class is greatly appreciated!
  13. [Ask how]Create game for moodle LMS

    Hi All, Anybody in here already create game using phaserjs and embeed to moodle ? i have some problem to do that, if anyone have success, please give me advise. Thank You, P
  14. I'm using a custom material which is pretty similar to the ground material used in WorldMonger demo. The problem is that I don't get a shadows on it. Well it's not a big surprise, because I'm overriding the _effect property of the base material. The question is how can I get both my effect with a base material effect without copy-pasting the code from base material. I mean how can I get shadows while using additional effects?
  15. Custom Material - Animation

    Hello! I have been playing around with babylons animation features and I am curious if it is possible to connect a BABYLON.Animation to a custom material / a ShaderMaterial? Thanks!
  16. ---

  17. Draw custom shape Mesh

    For the last 2 full days I am trying to make a function to draw a custom shape mesh and I can't do it. I am trying to fill it with triangles (as I understand it is done), but my math skills and logic are not good for this. Plus the function I made doesn't fill it correctly and loads the browser (and RAM) very much to the point that it crushes the browser for low memory (after long time usage ~ 1 hour ). It is driving me crazy, and I saw that is on the road-map, but I desperately need it for the current project I am working at, this being the only thing that is stopping me to advance. PS: I do not intent (for now) to use curved lines in the custom shapes.
  18. Hello, I'd like to customize my player by giving the ability to pick different avatars/colors/etc from predefined list. I've already checked phaser examples, and wiki on the github. Would you recommend some examples with the similar behaviour, please?
  19. Add more (custom) properties to sprite

    Hi, I would like to know if it is possible to create more properties for a sprite. For example, I'm creating a multiplayer game that is based on GPS, so I would like to assign a latitude and longitude to a sprite. So I would like to do it like this: sprite.latitude = value; sprite.longitude = value; Is this possible out of the box, or do I have to modify the phaser.js to achieve this? Thanks in advance, Kevin
  20. Hi! I would like to show a custom loading bar at the beginning of my game. Is this possible in panda.js? How?
  21. Hello! I'm founder of - we're indie game developers working on an open source browser based TBS www.AncientBeast.comWe're considering adopting a game/rendering engine in order to make the game more playable on tablets and phones The gameplay coder has a question: Also, what's the state of documentation? Would rather see that instead of almost daily change log xD So far Phaser looks awesome, I really dig the website :-)