SebastianNette

Members
  • Content Count

    340
  • Joined

  • Last visited

  • Days Won

    5

Everything posted by SebastianNette

  1. SebastianNette

    How to make sure that a font is loaded?

    Hi guys, I have encountered a really weird behaviour with webfonts and am looking for a good way to solve this issue. I programmed 2 functions to check if the font was loaded. @css/main.css @font-face { font-family: 'GraphicPixel'; src: url('../fonts/graphicpixel-webfont.eot'); src: url('../fonts/graphicpixel-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/graphicpixel-webfont.woff') format('woff'), url('../fonts/graphicpixel-webfont.ttf') format('truetype'), url('../fonts/graphicpixel-webfont.svg#GraphicPixelRegular') format('svg'); font-weight: normal; font-style: normal;}@js/util.js // web font loaded - might want to change that// css solution ....function WebFontLoaded(fonts, callback) { if(!(fonts instanceof Array)) { fonts = [fonts]; } var random = "giItT1WQy@!-/#", // random characters that usually differ in width depending on the font loader = []; for(var i = 0; i < fonts.length; i++) { var span = $('<span>').text(random).css({ "font-family": "sans-serif", "font-variant": "normal", "font-style": "normal", "font-weight": "normal", "font-size": "50px", "letter-spacing": "0", "position": "absolute", "left": "-2000px", "top": "-2000px" }).appendTo('body'); loader.push([span, span.outerWidth()]); span.css("font-family", fonts[i]); } var interval = setInterval(function() { var count = 0; for(var i = 0; i < loader.length; i++) { if(loader[i][0].outerWidth() != loader[i][1]) { count++; } } if(count == loader.length) { clearInterval(interval); for(var i = 0; i < loader.length; i++) { loader[i][0].remove(); } callback(); } }, 50);};So I create a span with a text in sans-serif, then I change the font and check all 50ms if the offset width has changed, if so -> new font has been loaded. @js/renderer.js // webfont loaded ... might need to change that?fontLoaded: function(font, callback) { var check = new PIXI.Text("giItT1WQy@!-/#", { font: "50px MissingFontForPixi" }); var width = check.width; var interval = setInterval(function() { check.setStyle({ font: "50px " + font }); check.updateText(); if(check.width != width) { clearInterval(interval); check.destroy(true); callback(); } }, 50);}Here I create a textchild with an non-existend font and then I keep upating that textchild. If the width changed (then the font has been loaded) Is there any better way to check if a font has been loaded without having to add any huge apis to my app?
  2. SebastianNette

    [Launched] Thumb Space

    Trailer looks pretty good. Nice work. Maybe my mind is just corrupted, but the only thing that comes to mind when I see those thumbs is:
  3. SebastianNette

    How to call functions stored in an array

    If you need to call methods with arguments, then you could use apply for that. command[val].apply(this, Array.prototype.slice.call(arguments, 1)); //... processCommands("shoot", "first argument of the shoot method"); If you want to use a different context per function, you could bind the methods first: command = { rain: this.startRain.bind(this), //in the current file jump: this.player.jumpUp.bind(this.player), //jumpUp is in player.js shoot: this.singleBullet.bind(this.singleBullet, this.player)//needs an argument }; commad[val](); There are dozens of ways to get that kind of stuff done. Also I would move the command object outside of the processCommands method, or else it will be recreated everytime you use that method. However, I would just remove that processCommands function and just call the methods directly when needed. I don't see the benefit of using this.processCommands("jump") over this.player.jumpUp();
  4. SebastianNette

    How to call functions stored in an array

    As sapptime said, it should be: command[val](); However, if you call the functions like that, then they are called in a different context. So you might want to change that to: command[val].call(this);
  5. SebastianNette

    pixi meets angular & bootstrap - anyone interested?

    Thanks for the input, mattstyles. I generally tend to avoid DOM in my pixi projects. Mainly because on my other not-so-good-laptop it seems to get less fps if DOM elements overlay the canvas and for styling reasons. It's not only about screen resizing, but also about the idea of coding something once and having it work on all screen sizes out of the box. I haven't seen that PIXI/React framework yet, so I am not entirely sure how it works. About the framework I am working on, the 3 core concepts are: 1. Being able to easily position / display / size elements based on the screen size. 2. Being able to de-couple logic, views and data. 3. And to abstract away event listeners. I'm not using any angular code, I just mimic its behaviour, so hopefully there won't be any performance issues. All elements that are listened on, either by $watch or inside an expression, are pushed to a linear graph and the time it takes to loop through a few items for dirty checking, should be negligible low. At around 10,000 listeners, the dirty checking takes about 1ms for me. I can't imagine a game that actually needs that many properties, so I would assume that in most cases this will take around 0.1ms to 0.5ms. Most devs probably need close to that time with their own event listeners based on how heavy their UI is. There is still a lot room for improvement, I just quickly coded this up in the past week.
  6. Note: This is still work in progress Hi folks, I haven't done much with pixi lately, most of my work resolves around MEAN stack and I usually don't have enough time for anything not work related. A few weeks ago, when I had more time, I started working on my new game. My game looked ace on my laptop, but literally looked terrible for anyone who didn't use anything close to my screen resolution. On smaller devices, my content barely fit, if at all. On bigger devices, I had a lot empty spaces or the fonts were too small. I tried fixing most of the issues, but this bloated my files with a lot UI related code. But that wasn't the only issue. Most of my UI is way too repetitive to code. Character inventories, which display an array of items, friendslists, which display an array of ingame friends, ingame stores, that display an array of cash shop items, skillbars, that, well.. display an array of skills. Eventually I ended up telling myself to screw this. So I was thinking on. Why is it, that I can easily create a website that fits any screen resolution, manipulate content in a few lines of code, but when it comes to pixi (or canvas for that matter), it often takes me at least a day to add a new component to my game? And the answer is obviously that there are just better tools for that task in the DOM world. What I am currently doing - and I have literally no idea, if this is worth it at all or not - is to mimic the behaviour of angular and bootstrap for pixi. I have a simple demo here: http://mokgames.com/redhawk-demo/ Small Screen | Medium Screen | Large Screen Here is a short overview of how RedHawk is supposed to work: Scenes instead of Controllers Unlike Angular, RedHawk is using scenes. Scenes consist of the following methods: init (called before preload), preload (loads the assets), create (called after preload), update (called pre render), render (called after the scene is rendered to canvas) and shutdown (called when the scene changes). Took inspiration from phaser when I decided for those methods. Every scene comes with a $scope, which holds all scene related methods and is also used to dynamically update objects. You can inject different modules/components to your scene by simply adding those as arguments to the scene methods. Some of those predefined modules are: $timeout, $interval, $raf; Start / stop timeouts, intervals and animation frames. Unlike the window methods, those timers are cleared when the scene changes. $http: Handles ajax requests (also bound to the scene. requests are aborted if not done before changing the scene) $q: Also bound to the current scene, something that acts similiar to Q / Promises. $scene: used to change scene. $layout: Holds the device class, screen width / height and several other methods. Example: RedHawk .addScene("Shop", { init: function ($scope) { $scope.something = 123; }, //... }) .boot("Shop"); Services Services can be injected to any scene and are generally used to separate data from logic. Example: Demo: http://mokgames.com/redhawk-demo/item.html RedHawk .addService(function ItemService($http) { // request $http module function getInfo(id) { return $http.json("./items/" + id + ".json"); } return { // expose public methods getInfo: getInfo } }) .addScene("Shop", { init: function ($scope, ItemService) { // request item service ItemService.getInfo(1).then(function (response) { $scope.item = response.data; }); }, create: function ($scope) { var item = $scope.$hawk("Text", {text: "Name: {{item.name}}\nPrice: {{item.price}}", show: "item", style: {fill: "#fff"}}); $scope.$add(item); } }); Factories Factories are pretty similiar to services, but with one difference. Factories return an instance everytime they are called. Example: RedHawk .addFactory("Monster", function () { this.health = 100; }); RedHawk config: RedHawk .config({ ticker: {fps: true}, // rendering loop, fps: true populates $scope.fps with the current fps renderer: "auto", // can be a PIXI renderer or auto | webgl | canvas options: { ... }, // renderer options target: document.body, // element to append the renderer view to boot: "StartScene" // tells redhawk which scene to boot }); Booting RedHawk: RedHawk.boot("Scene"); // unless already specified in config Watching a scope property: Demo: http://mokgames.com/redhawk-demo/watchMe.html RedHawk .addScene(function SomeScene($scope) { $scope.watchMe = 0; $scope.$watch("watchMe", function (newValue, oldValue) { console.log("watchMe changed: ", newValue, oldValue); }); this.render = function (elapsed, time) { $scope.watchMe = time; }; }); Bootstrap But how do we copy bootstrap? If you ever used bootstrap, then you know quite a few of the most convenient bootstrap classes. 1. Device class The $layout component, which is responsible for screen resizes / detection, knows about the following classes: xs - screens that are less than 768px wide (usually phones) sm - screens between 768px and 991px (tablets / phones) md - screen between 992px and 1199px (tablets / desktop) lg - screen that are 1200px or wider (desktop / smart tv / etc) Order is xs -> sm -> md -> lg 2. Columns The bootstrap grid consists of 12 columns. Each column therefor takes up 1/12 of the parents width. One of the major advantages is that you can define different column sizes for different device classes. For instance: col-md-6 would be 50% of the width in bootstrap. We use something similiar, which I will explain at hawk objects 3. Rows Unlike Bootstrap, we not only use columns, but also rows. So our grid is actually 12x12. 4. Visibility classes hidden-xs, hidden-sm, hidden-md, hidden-lg: only hides the object on the specified device class. visible-xs, visible-sm, visible-md, visible-lg: only shows the object on the specified device class. visible-*-up: only shows the object on * and up e.g. visible-sm-up: visible on sm, md, lg visible-*-down: only shows the object on * and down e.g. visible-sm-down: visible on xs, sm same for hidden-*-up and hidden-*-down Hawk Objects So, now with all this fancy stuff, how would we use it? Simple, we need to call $scope.$hawk (or the shortcut $hawk for that matter) on any PIXI object. Example: Demo: http://mokgames.com/redhawk-demo/profile.html RedHawk. .addScene("Profile", { init: function ($scope) { $scope.player = { name: "Desu", level: 9001 }; }, create: function ($scope, $hawk) { var name = new PIXI.Text("", {fill: "#fff", font: "10pt Arial"}); $scope.$hawk(name, {text: "{{player.name}}"}); // magic: every expression needs to be written as {{exp}} $scope.$add(name); // another way to do this : note $hawk and $scope.$hawk act exactly the same var level = $hawk("Text", { text: "Level: {{player.level}}", style: {fill: "#fff", font: "10pt Arial"}, y: 10 }); $scope.$add(level); } }); Whenever $scope.player.name changes it's value, name gets updated automatically. Same for level when $scope.player.level changes. RedHawk property list: var sprite = $hawk(new PIXI.Sprite(), { classes: "visible-sm-up xs-3x3 right", // {String} shortcut for visibility, grid and position classes visibility: "hidden-lg hidden-xs", // {String} List of all visbility classes grid: "md-6 xs-12 lg-4x4", // {String} List of grid classes *-(cols)x(rows) or *-(cols), show: "player.level > 1", // {String} expression that determines whether or not this element should be displayed repeat: "friend in friends", // {String} Iterates over an array. possible values: "value in scope.var", "(key, value) in scope.var", "value in [1,2,3]" bounds: { width: "25%", height: 100 }, // {Object} widths/height can either be % or a number, defines their width/height without scaling width: "25%", // object width, can either be a number or a percentage height: "50%", // object height, can either be a number or a percentage x: "10%", // object x, can either be a number or a percentage y: 100, // object y, can either be a number or a percentage position: "top right" // {String} positions the element at (left|center|right) (top|middle|bottom) }); Any other property of the object works as well. E.g.: texture (for sprites), text (for texts), or anything else. So, to get back to the example that I posted earlier. http://mokgames.com/redhawk-demo/ If you look at the source code, here is what happens: var desu = { /* StartScene: create */ create: function($scope, $hawk) { /* PIXI.Text * * text and font update based on the properties of * $scope.$device - provided by $layout * $scope.$width - provided by $layout * $scope.$height - provided by $layout * $scope.fps - provided by $ticker * * Every time any of those change, the text gets automatically updated * if the fps are lower than 10, a leading 0 is displayed: {{fps < 10 ? '0' + fps : fps}} * the font size changes according to the $device class: {{font[$device]}}px arial (fonts is defined in init */ var debug = $hawk("Text", { text: "FPS: {{fps < 10 ? '0' + fps : fps}}\nDevice: {{$device}}\nScreen: {{$width}} x {{$height}}\nTap to add an fps indicator.\nTap 4 times to change the scene.", style: {fill: "#fff"}, font: "{{font[$device]}}px arial" }); // add the text to the stage $scope.$add(debug); /* PIXI.Container * * Outer container for our fps indicator sprites * Container is fixed to bottom center * Container is 50% of the parents width and 25% of the parents height * since the stage is the parent, the width equals 50% of $width ($layout) * and 25% of $height ($layout) */ var itemContainer = $hawk("Container", { bounds: { width: "50%", height: "25%" }, position: "bottom center" }); /* PIXI.Sprite * * Creates automatically a Sprite (repeat) for each element in $scope.items (repeat: "item in items") * Sets the texture of that Sprite to "./img/fps-{{Math.min(3, fps / 15 | 0)}}.png" (gets updated when $scope.fps changes) * basically 0-14 fps red, 15-29 orange, 30-44 yellow, otherwise green * Each sprite gets stretched to grid: "xs-4x12" * Grid: 4 cols and 12 rows, so width: 33.33% and height 100% of the parent * The parent is the Container, which means we get 33.33% of 50% of $layout.width and 100% of 25% of $layout.height * Each Sprite is positioned at $index * this.width ($index is the index in the repeat object) and this.width is the Sprite's width */ var items = $hawk("Sprite", { image: "./img/fps-{{Math.min(3, fps / 15 | 0)}}.png", grid: "xs-4x12", repeat: "item in items", x: "{{$index * this.width}}" }); itemContainer.addChild(items); // outer container is added to the stage $scope.$add(itemContainer); } } Well, that's enough for now.. Didn't plan to write so much, and to display so many examples, but instead I just wanted to ask for opinions. Maybe some of you also use angular / bootstrap or you have suggestions for me. I intentionally keep the redhawk.js minified, since it is still work in progress. I just thought showing a minimalistic demo would make my intention clearer. And generally, would anyone use a framework like this? It is intended to mainly handle UI and to allow you to quickly push out a game state/scene. I'm pretty sure that this would work well with Phaser or any other game engine, so while RedHawk solves all your UI nightmares, an actual game engine could hook in to render the game. My goal is to be able to render a huge amount of hawk objects in preferable less than 1ms, so that the remaining time in the rendering loop can be used to render the game. When playing some of the most successful games in app stores, I realized that those games are at least 50% fancy UI, the games usually are minimalistic. Which lead me to my decision to focus on UI first, before finishing my game. Anyways, would like to hear some thoughts on this. Cheers
  7. SebastianNette

    How to make sprite move in the direction it's facing?

    You don't need a physics library for that. Simple trigonometry is enough. function move(object, distance) { object.x = object.x + distance * Math.cos(object.rotation); object.y = object.y + distance * Math.sin(object.rotation); } https://jsfiddle.net/11av8s0m/
  8. SebastianNette

    Best time to publish ongoing project?

    Art and Audio can be (and usually is by default) copyrighted, game ideas and mechanics however are free to use by anyone and rightly so. You can waste your money on a patent, but you won't be able to enforce it in court. And trying to sue some shady dev who is sitting in a country on the other side of the planet takes a lot effort, time and money. The one thing that got games to where they are today is the constant copying of ideas. Imagine the people creating the first FPS would have the sole monopoly on that genre. GG. The chances that someone creates a blatant 1:1 copy of your game is very slim, especially before you release your game. So the only advice I can give is to start promoting your game as early as you have something to show on any media you have access to. You might even find people who want to back up your game or you could start a kickstarter. Often games are rejected by publishers, even when they are really good, just because the dev didn't have any promotion material or no one ever heard of that game before. And if you mess up the marketing, then you will miss out on some great deals. Many games even start promoting as early as 1-1.5 years before the actual release.
  9. SebastianNette

    draggable&droppable in pixi!

    Hey Guys, I am currently porting jQuery droppable & draggable to pixi.js. A demo can be found here: http://mokgames.com/playground/pixi/draggable/ There are still some minor bugs when it comes to constrainments. This will be fixed soon. I want to know if anyone is interested in this plugin. Basically it behaves mostly like jquery. Example: var sprite = new PIXI.Sprite(texture);stage.addChild(sprite);sprite.draggable();That's all you would have to do. Only draggable along the x-axis: var sprite = new PIXI.Sprite(texture);stage.addChild(sprite);sprite.draggable({ axis: "x" }); Grid behaviour: var sprite = new PIXI.Sprite(texture);stage.addChild(sprite);sprite.draggable({ grid: [ 50, 50 ]}); Full list of options: { axis: null, containment: null, cursor: "inherit", cursorAt: null, grid: false, handle: null, cancel: null, helper: "original", alpha: 1, revert: false, revertDuration: 500, label: null, snap: null, snapMode: "both", snapTolerance: 20, disabled: false, drag: null, start: null, stop: null} Drag & Drop: var item = new PIXI.Sprite(texture);stage.addChild(item);item.draggable({ label: "item"});var bagslot = new PIXI.Sprite( ... );bag.addChild(bagslot);bagslot.droppable({ accept: "item" }); Various demos can be found here: http://mokgames.com/playground/pixi/draggable/ I'm asking because I want to know how many people would actually want such a drag&drop feature for pixi out of the box. If there are enough people who want it, then maybe we could actually merge this into the newest pixi
  10. SebastianNette

    Anchors are confusing

    Hi Guys, I'm pretty confused by anchors in v3. For instance, I have a Sprite and set the anchor to (0.5, 0.5) and place that Sprite in the middle of the canvas. Now I add some children to that Sprite. How comes that those children when set to position (0,0) are not in the top left corner of the parent Sprite but instead in the center of it? I also have a second Sprite with the same anchor (0.5, 0.5) and then I am trying to scale it. But the Sprite doesn't scale from the center. So I take that the anchor just determines where the texture is drawn but does not affect any transforms? How would I scale a Sprite from the center?
  11. SebastianNette

    Anchors are confusing

    That would work but it feels pretty lame to add an extra Container just to scale a single sprite. Thanks though, guess I'll have to do that in the end.
  12. SebastianNette

    Anchors are confusing

    Yea, that was just my lazyness, lol. I remembered that Containers didn't have an anchor property back then, so I wanted to use a Sprite instead. That whole pivot thing seems way too inconvenient :/ So basically, if the size of the object can change, I have to re-set the pivot every frame since it works in absolute pixel. meh.
  13. SebastianNette

    PIXI.Text looks not efficient

    I think you are misunderstanding the PIXI.Text object. It sure creates a canvas when you create a new object, which makes sense, since you are creating a new Texture. When you update the text then it just sets a dirty flag. And in the next rendering loop, it redraws the text once. All optimization lies in your responsibility. For instance, when you re-use some text te.g. you have a user list and next to every user name is a "Add as Friend" text, you could do something like: var addAsFriend = new PIXI.Text("Add as Friend"); var button1 = new PIXI.Sprite(addAsFriend.texture); var button2 = new PIXI.Sprite(addAsFriend.texture); var button3 = new PIXI.Sprite(addAsFriend.texture); ... You could as well take that texture and use it as a baseTexture and divide it into multiple frames. var manyTexts = new PIXI.Text("Add as Friend\nRemove Friend\nIgnore"); and then just set a frame per line. It sure is not meant to constantly change huge texts. But do you really need to do that? What are you using it for? If you are worried about the amount of textures/canvas, you could always use a Bitmap text or write a shader to act like a Bitmap text.
  14. SebastianNette

    Simple Quad with custom shaders

    Hey guys, due to the lack of several features in pixi v2, I didn't work much with pixi in the past year but instead ran my own rendering engine. Now with pixi v3, I assume that I can continue using pixi. I'm still going through the source code of v3 and I'm trying to understand all the changes since v2. So far so good. It's really well structured. What I currently need help with are custom shaders. I have a simple full canvas QUAD -1, -1 to 1, 1, a vertex shader and a fragment shader. I also have 3 textures that I pass to my shader. it's trivial in webgl, but how would I go about this in pixi? Can I use a PIXI.Sprite with width and height set to the renderer's width and height and apply a custom AbstractFilter to it, or would I need to write my own RenderObject? I really don't need any of the fancy stuff. No positions, no scaling, no rotation, just a QUAD with a shader applied to it. This is an isometric map renderer that I wrote for my game: precision mediump float; attribute vec2 position; attribute vec2 texture; varying vec2 pixelCoord; uniform vec2 viewOffset; uniform vec2 viewportSize; void main(void) { pixelCoord = (texture * viewportSize) + viewOffset; gl_Position = vec4(position, 0.0, 1.0); } precision mediump float; varying vec2 pixelCoord; uniform sampler2D tiles; uniform sampler2D sprites; uniform sampler2D hitTest; uniform vec2 inverseTileTextureSize; uniform vec2 inverseSpriteTextureSize; uniform vec2 tileSize; uniform vec2 animationStep; uniform vec2 halfTileSize; uniform vec2 inverseTileSize; void main(void) { vec2 spriteCoord = mod(pixelCoord, tileSize); vec2 texCoord = vec2(0.0, 0.0); if (texture2D(hitTest, spriteCoord / tileSize).x > 0.5) { texCoord.x = floor(pixelCoord.x / tileSize.x); texCoord.y = 2.0 * floor(pixelCoord.y / tileSize.y); } else { texCoord.x = floor((pixelCoord.x + tileSize.y) / tileSize.x) - 1.0; texCoord.y = 2.0 * floor((pixelCoord.y + halfTileSize.y) / tileSize.y) - 1.0; spriteCoord = mod(spriteCoord + halfTileSize, tileSize); } vec4 tile = texture2D(tiles, texCoord * inverseTileTextureSize); if(tile.r == 1.0 && tile.g == 1.0) { discard; } vec2 spriteOffset = floor((tile.rg + tile.rb * animationStep) * 256.0) * tileSize; gl_FragColor = texture2D(sprites, (spriteOffset + spriteCoord) * inverseSpriteTextureSize); } As you can see, it's pretty simple, I just need to be able to pass 3 textures to my shader. I also need to access the stencil buffer for a fog of war shader. I guess I would have to study the webgl GraphicsRenderer and roll my own as well. Anything I absolutely need to keep in mind to avoid pixi going crazy? I would really appreciate it if anyone could tell me how I can create a custom sprite without a texture. I can figure out the rest myself, if I get something as simple as this running, I'd be more than happy. QUAD: [ x y u v -1, -1, 0, 1, 1, -1, 1, 1, 1, 1, 1, 0, -1, -1, 0, 1, 1, 1, 1, 0, -1, 1, 0, 0 ]; VERTEX SHADER attribute vec2 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 0.0, 1.0); } FRAGMENT SHADER precision mediump float; void main(void) { gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); } That would be my quad drawn via gl.drawArrays(gl.TRIANGLES, 0, 6); Cheers
  15. SebastianNette

    pixelPerfectOver causing 'cross-origin'

    Well, the error is pretty clear. The image is tainted and you don't have the permission to access the image data. You need to fix the serverside CORS headers when serving the image e.g. Access-Control-Allow-Origin "*"
  16. SebastianNette

    Forum Upgraded

    Hey Rick, is there a way to 1. preview posts and 2. to disable the wysiwyg editor? I can't find those options anymore. I would also be happy if there is a way to reduce the lineHeight for messages. This kinda gives the facebook vibe. No double checking, type it and send it, feels so spammy xD
  17. SebastianNette

    Isometric Rendering Engine

    Hey Ivan, thanks for the feedback. This topic is quite old. I was really busy with uni and work (freelancing) in the past year. Pretty much got a 50-60 hour work week. My renderer works differently. It automatically culls the frustum and just needs to draw 1 single quad. It's pretty much the fastest I came up with. The map itself is a simple texture. Each pixel represents 1 tile. The red channel is the x and the green channel is the y for the tile position in the spritesheet. The blue channel can either be 0 or 1, where 1 means that the tile is animated. Animated tiles animate over y, y+1, y+2 and y+3. I have no intention to support depths. Anything that can overlap the character, like the character standing behind a tree, shall just be a simple sprite in a spritebatch traveling with the character. Here is an example (not too optimized) and ignore the fog of war around the cursor LOL! I was just experimenting. http://mokgames.com:3000/editor/map/wsji18d00c064e3eb01b346121f577f52821 This is the spritesheet for the demo. The first water tile can be animated and then loops over those 4 water tiles.
  18. SebastianNette

    Isometric Rendering Engine

    Hey Guys, I'm currently coding a new map editor. Most people use Tiled but I prefer to roll my own because it allows me to customize, realize my own ideas and I always learn new things down the road. This will still take me some time but most of the rendering engine is already written. I'm posting this topic, because I'm quite excited about the Isometric Rendering Engine which I wrote in the past 8 hours. Or maybe it is just because I didn't sleep at all. So I have created a test map of 4096x4096 tiles, each tile being 64x32 pixel in size and ran it on fullscreen on my crap laptop. And I surprisingly get 60 fps. This is written in webgl and I'm sure it will be quite easy to port this to PIXI and Phaser too. I also have a canvas based renderer, which is slightly slower. It was quite a pain to figure out the correct math for my shaders but it seems to work fine so far. It would be really awesome if you guys could test out the map on the following link and maybe report back your fps, so I can be sure that this works on more than only my own laptop. http://mokgames.com/playground/isogl.html (might take some seconds to load because it's creating a huge tilemap during load) Things I want to add next: * Animated Tiles * Layering
  19. SebastianNette

    Simple Quad with custom shaders

    The performance is actually pretty good, all the texture lookups should be cached by the gpu and the rest is just some simple math. Another approach would be to pre-render 9 chunks at half the viewport width and height and move / redraw them as needed. Not sure yet which would be faster. But the cost of drawing several quads should be greater than drawing the map in one go. I'm still experimenting on this. I want a really fast background shader that ignores all depth. As few quads as possible. My isometric renderer is inspired by Toji's 2d renderer for LTTP. http://media.tojicode.com/zelda/lttp.html Just that I go 2.5d instead of 2d. I think no one can complain about the rendering speed Thanks xerver, that makes sense. I need 3 textures (the map image, the hit test tile and the spritesheet). Is there an example somewhere that shows how I would send more than 1 texture to my shader? For my fog of war shader, I basically just disable the colorMask and enable the stencil buffer, then I draw a batch of white circle textures to all onscreen units, enable the color mask again and draw a fullscreen half transparent black quad and disable the stencil buffer again. gl.enable(gl.STENCIL_TEST); gl.stencilFunc(gl.ALWAYS, 0x1, 0xffffffff); gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE); gl.colorMask(false, false, false, false); /* draw units / gl.colorMask(true, true, true, true); gl.depthMask(true); gl.stencilFunc(gl.NOTEQUAL, 1, 1); gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); /* draw quad (0.0, 0.0, 0.0, 0.5) */ gl.disable(gl.STENCIL_TEST); The shader for the fog would then just discard all pixel in the buffer drawn by the circle batch. How would I go about this? I don't want to use a PIXI.Graphics object, especially because I don't want it to calculate the circles as a polygon each frame but instead just batching those circle textures, like a ParticleContainer would do. Is there a way for PIXI, to mask a Sprite by a ParticleContainer?
  20. SebastianNette

    Simple Quad with custom shaders

    Thanks, Ivan! Sounds geat. I will take a look into that, Happy to hear that custom renderObjects are possible. When I checked the v3 source and at renderer.plugins.sprite.render(this); I got lost and didn't know where to continue reading. I will see if I can create a dead simple shader with your code.
  21. SebastianNette

    PIXI Input Elements

    Edit: I have just pushed my plugin to github. There are still many things to do as you can see in the contribution part of the read me. However, you can just grab the plugin now, start working with it and then just grab the new version as soon as it's ready. https://github.com/SebastianNette/PIXI.Input I think this fits better here than in the other topic. I'm currently working on input sprites for pixi and made quite some progress. The idea is to render input elements on the stage instead of fiddling around with real HTML tags. That means all those elements are completely rendered using pixi. Demo: http://mokgames.com/playground/pixi.dom/ Feel free to tell me if you find any bugs and to post your suggestions. I want to allow styling the inputs with CSS (optional) as well as supporting Bitmap Fonts for all the inputs. After completing the select box I will also add checkboxes/radio buttons. After that I would need to take a look at textareas. I do have a working script for scrollable containers, but applying it to a textarea might be more difficult.
  22. SebastianNette

    Isometric Rendering Engine

    Thanks for letting me know, eyp. It's really interessting that you guys get decent fps on firefox. For me it's always the slowest compared to IE and Chrome. IE only gets worse than FF as soon as there are a lot things to render. Here are 2 screenshots of the current state of the editor: Basically, you can work on different views which has quite a few reasons. 1. I want to be able to edit a map on different layers at the same time. 2. I want to be able to view what other people are doing on the map. 3. I want to easily copy & paste or edit maps on different locations. Most of it is already programmed, so maybe there can soon be a beta.
  23. SebastianNette

    Day/night cycle, best practises?

    I would set the background to black and skip the drawing calls on all tiles that are not in the radius of a light sources, then render the tiles in the radius of a light source normally and at the end I would draw the shadow texture on the coords of the light source. You want to minimize drawing calls and to keep your shadow texture small. If you are not rendering per tile then you should just write a custom webgl shader and for canvas keep your current approach.
  24. SebastianNette

    Isometric Rendering Engine

    Sounds great! Hopefully gonna keep that up as soon as there are more than just 1 layer and animated tiles. Right now I'm doing 3 texture lookups in my shader, but I want to reduce the amount to just 2 lookups. If anyone knows a pretty fast diamond/isometric hit test algorithm, then please let me know.
  25. SebastianNette

    js13kGames 2015

    Hi end3r, nice to see that there's another js13k this year. I was wondering if things like crossdevice support or following the theme will have an higher impact on the rating this year. I'm mainly interested to know if we are allowed to use ES6 even tho it is not widely supported yet. If it's "It has to run on at least 1 machine/browser" then ES6 would be perfectly fine but if the toll for not supporting other devices is too high, then it might be better not to use it. Cheers