PAEz

Members
  • Content Count

    55
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by PAEz

  1. Far from perfect but in Codepen you can access a resource in another pen... https://blog.codepen.io/2013/05/28/new-feature-use-pens-as-external-resources/ ..not perfect but good enough some times....still love plnkr
  2. Awesome, loved it. Can you put stuff in the buildings or something on the side occasionally because there was never a reason to shot left or right,.
  3. Just dont forget your password to Gio's site or you'll never get in again. @Gio Thats just a sarcastic dig at the fact you dont have a forgotten password link on your site.
  4. Yep... plnkr.co ...its rather good to (love the error hinting), being using it alot lately.
  5. PAEz

    Tricky question

    Incase you missed it what you need to know is Scope and Closures, this is really important js fundamentals. Heres a few links on the subject that looked ok.... http://doctrina.org/JavaScript:Why-Understanding-Scope-And-Closures-Matter.html http://ryanmorr.com/understanding-scope-and-context-in-javascript/ http://speakingjs.com/es5/ch01.html#basic_var_scope_and_closures
  6. Wow, thats seriously cool, well done! I tried your demo on my tablet so I could tell you the frame rate it got but theres nothing showing that. Is there some way on Android to do that or something?....Im new to Android, only recently got a tablet. Anyway, runs smooth as silk on my Tegra Note 7. Add something to tell me the fps and add more sprites, lets see how many it can handle EDIT: Oh and small tip. For your shaders code use the multiline function technique, makes them alot easier to edit.... https://gist.github.com/PAEz/8211784 ...theres a thing on github that does it a little nicer, cant be bothered finding it right now
  7. I finally got around to having a play with this (bad memory, plus fickle, is not a good combo;) ). The first thing I tried was running grunt and the output was ugly coz of escape codes or what ever their called. So I found this page... http://en.wikipedia.org/wiki/ANSI_escape_code ...and wrote something to handle them. Not sure how to integrate it properly so I thought Id just paste it here for you and you can do what ever with it. Did integrate it in a hacky way and at least grunts output is coloured and what not now, even with gawd awful underlines Still haven't checked some things like intensity. Anyway, really cool thing, look forward to your updates. EDIT: fixed it (I tHiNk) and added some stuff (like the keyInput that I used with the edit save thing). Plus made it dom based now so you dont have to replace < symbols coz they get added as a text node. Plus the dom based stuff lends its self to some cool stuff (function() { function ConsoleToHTML(output) { function self(str, className, lineFragment) { if (str instanceof DocumentFragment || str instanceof Element) { self.output.appendChild(str); return; } var lineFragment = lineFragment || document.createDocumentFragment(); // http://regex101.com/r/rC3vM7/3 // Best online regex editor, ever! Helped SOOOOOOOO much. var re = /([^\x1B]*)(?:\x1B[[]([^m]*)m)([^\x1B]*)/gm;; // I SUCK at regular expressions! If anyone can improve, please say var result = ''; var m; if (str.match(re)) while ((m = re.exec(str)) != null) { if (m.index === re.lastIndex) { re.lastIndex++; } if (m[1] !== '') { result += self.wrapString(m[1], className, lineFragment); } if (m[2] !== '') { self.processCommands(m[2]); } if (m[3] !== '') { result += self.wrapString(m[3], className, lineFragment); } } else self.wrapString(str, className, lineFragment); self.output.appendChild(lineFragment); return self; } // http://en.wikipedia.org/wiki/ANSI_escape_code self.processCommands = function(commands) { commands = commands.split(';'); for (var i = 0, end = commands.length; i < end; i++) { var command = commands[i]; switch (true) { case command >= 30 && command <= 37: // foreground self.setColour('foreground', command - 30, false); break; case command >= 40 && command <= 47: // backgroiund self.setColour('background', command - 40, false); break; case command >= 90 && command <= 97: // intense foreground self.setColour('foreground', command - 90, true); break; case command >= 100 && command <= 107: // iontense background self.setColour('background', command - 100, true); break; case command == 0: // reset self.resetProperties(); break; case command == 1: // bold or increased intensity....still need to check how windows does intensity..this way or through 100-107? self.properties.bold = true; break; case command == 2: // Bold: off or Underline: Double...were going with bold off self.properties.bold = false; break; case command == 3: // Italic: on self.properties.italic = true; break; case command == 23: // Not italic, not Fraktur self.properties.italic = false; break; case command == 4: // Underline: Single self.properties.underline = true; break; case command == 24: // Underline: None self.properties.underline = false; break; case command == 22: // Normal color or intensity // if windows intense is switched on and off (not 100-107) this will need to be different self.properties.foreground = self.defaultForeground; self.properties.background = self.defaultBackground; break; case command == 39: // Default text color (foreground) self.properties.foreground = self.defaultForeground; break; case command == 49: // Default background color self.properties.background = self.defaultBackground; break; default: break;; } } } self.wrapString = function(str, className, lineFragment) { var el = document.createElement(self.wrapTag); if (className) el.classList.add(className); el.innerText = str; self.applyStyle(el); lineFragment.appendChild(el); } self.applyStyle = function(el) { if (self.properties.bold) self.applyProperty(el, 'bold'); if (self.properties.italic) self.applyProperty(el, 'italic'); if (self.properties.underline && !self.ignoreUnderline) self.applyProperty(el, 'underline'); if (self.defaultForeground !== self.properties.foreground) self.applyColour(el, 'foreground'); if (self.defaultBackground !== self.properties.background) self.applyColour(el, 'background'); } self.applyProperty = function(el, prop) { if (self.useClass) el.classList.add(self.styles[prop].class); else el.style[self.styles[prop].atr[0]] = self.styles[prop].atr[1]; } self.applyColour = function(el, colour) { var cols = { foreground: 'color', background: 'background-color' } if (self.useClass) el.classList.add(self.properties[colour]); else el.style[cols[colour]] = self.colours[self.properties[colour]].value; } // Different log types self.path = function(path, command) { return self(path, 'path'); } self.specialCommand = function(path, command) { return self.path(path)(command + '\n', 'special_command'); } self.jsCommand = function(path, command) { return self.path(path)(command + '\n', 'js_command'); } self.dosCommand = function(path, command) { return self.path(path)(command + '\n', 'dos_command'); } // Converts HTML to Elements and then attachs those elements to the output // Could see people thinking this is for attaching Elements to the output so make it do that aswell...couldnt think of a clear name for it that wasnt long self.HTML = function(html) { if (html instanceof Element || html instanceof DocumentFragment) return self(html); // http://stackoverflow.com/a/9285046/189093 // The EVER awesome Rob W var frag = document.createDocumentFragment(), t = document.createElement('body'), c; t.innerHTML = html; while (c = t.firstChild) frag.appendChild(c); return self(frag); } self.keyInput = function(question, selections, callback) { var qLine = document.createElement('span'); self(question, 'question', qLine); for (var i = 0, end = selections.length; i < end; i++) selections[i] = selections[i].toLowerCase(); return (function(selections, callback, qLine) { var f = function(eventData) { var code = eventData.keyCode; var charStr = String.fromCharCode(code).toLowerCase(); if (code == 27) charStr = 'esc'; else { eventData.stopPropagation() eventData.preventDefault(); } if (selections.indexOf(charStr) !== -1) { if (charStr !== 'esc') self(' ' + charStr + self.lineBreak, '', qLine); callback(charStr); window.removeEventListener('keypress', f); } return false; } window.addEventListener('keypress', f); var escapeFunc = function(e) { if (e.keyCode == 27) { window.removeEventListener('keypress', f); window.removeEventListener('keydown', escapeFunc); f({ keyCode: 27 }); e.stopPropagation() e.preventDefault(); return false; } } if (selections.indexOf('esc') !== -1) window.addEventListener('keydown', escapeFunc) return qLine; })(selections, callback, qLine); } self.setColour = function(colour, value, intense) { var shift = intense ? 8 : 0; self.properties[colour] = value + shift; } self.resetProperties = function() { for (var i = 0, keys = Object.keys(self.defaultProperties), key; key = keys[i]; i++) { self.properties[key] = self.defaultProperties[key]; } } self.buffer = ''; self.useClass = false; self.wrapTag = 'span'; self.defaultForeground = 7; self.defaultBackground = 0; self.ignoreUnderline = true; self.defaultProperties = { italic: false, bold: false, underline: false, foreground: self.defaultForeground, background: self.defaultBackground } self.properties = {}; self.resetProperties(); self.lineBreak = '\r\n'; self.styles = { bold: { atr: ['fontWeight', 'bold'], class: 'font_bold' }, italic: { atr: ['fontStyle', 'italic'], class: 'font_italic' }, underline: { atr: ['textDecoration', 'underline'], class: 'font_underline' } } self.colours = { '0': { value: 'rgb(0, 0, 0)', class: 'black' }, '1': { value: 'rgb(128, 0, 0)', class: 'red' }, '2': { value: 'rgb(0, 128, 0)', class: 'green' }, '3': { value: 'rgb(128, 128, 0)', class: 'yellow' }, '4': { value: 'rgb(0, 0, 128)', class: 'blue' }, '5': { value: 'rgb(128, 0, 128)', class: 'magenta' }, '6': { value: 'rgb(0, 128, 128)', class: 'cyan' }, '7': { value: 'rgb(192, 192, 192)', class: 'white' }, // Intense Colours '8': { value: 'rgb(128, 128, 128)', class: 'black_intense' //Dark grey }, '9': { value: 'rgb(255, 0, 0)', class: 'red_intense' }, '10': { value: 'rgb(0, 255, 0)', class: 'green_intense' }, '11': { value: 'rgb(255, 255, 0)', class: 'yellow_intense' }, '12': { value: 'rgb(0, 0, 255)', class: 'blue_intense' }, '13': { value: 'rgb(255, 0, 255)', class: 'magenta_intense' }, '14': { value: 'rgb(0, 255, 255)', class: 'cyan_intense' }, '15': { value: 'rgb(255, 255, 255)', class: 'white_intense' } } if (typeof output == 'string') { var el = document.body.querySelector(output); if (!el) throw 'No output element'; } else { el = output; if (!el instanceof Element) throw 'No output element'; } self.output = el; return self; } // I couldnt figure out how to require this in prompt.js so just attach script the old way window.ConsoleToHTML = ConsoleToHTML;})();
  8. http://codepen.io/jackrugile/details/IHbvh/ I didnt make this (which is why I put it here and not showcase...I dunno), just saw it on twitter and thought it was so cool. Its the snake game with the visuals done using css and the logic, js.
  9. I cant draw or anything so not the best to review your work but I found that to be very informative and very concise. Anyone new to doing this kinda thing would find this very helpful, well done. Thanks for adding the assets.
  10. That looks great and I really appreciate you taking the time to write it up instead of doing a youtube clip. One thing though, tomorrow I want to do this (as I aint done PS in ages) and Id really like the original asset you used so I don't have to recreate it. Its always good if we can follow the tut using the same stuff as in the tut so we can compare if were doing it right. Sorry if its in there somewhere (Ill admit I haven't read it in its entirety yet) and I just didn't notice it.
  11. @Rudy But for much less time than they would if they didnt cheat. Plus from a couple of people I know....If they can cheat their appreciation of the game will drop. I thnk this because of my bro in law. He use to cheat on EVERYTHING! I use to spend alot of time making cheats for him on the original xbox. Then 360 came out and he couldnt cheat anymore....Hes the one that told me that since not being able to cheat he actually enjoyed playing games more. Why? Who knows exactly. But personally I think its because hes pushed through the frustration of loosing and learnt that joy full feeling of being a true winner. Its the pain followed by the completion that truly makes you feel.
  12. In the future if all you want to know is if the json is valid then run it through this.... http://jsonlint.com/ ....I forgot all about that before. Me, I just put it in an editor and use jsbeautify to restructure it and then youll see the errors real quick.
  13. PAEz

    Arcade Font Writer

    Thats cool. I dont know why but that reminded me of...um...ghost writers?...meh, I cant remember what their called but you might remember. Remember those things where you typed stuff and it recorded all of it (cursor movements, corrections, woteva) and then played it back at the same speed (thinking c64 here).....use to love those things.
  14. No idea bout ya system or what not, but that json is broken, here it is fixed..... { "frames": [{ "frame": { "x": 2, "y": 0, "w": 1920, "h": 1080 } }, { "frame": { "x": 1924, "y": 0, "w": 144, "h": 90 } } ]}....can you spot your two errors? But then, why bother with the "frame"?...... { "frames": [{ "x": 2, "y": 0, "w": 1920, "h": 1080 }, { "x": 1924, "y": 0, "w": 144, "h": 90 } ]}
  15. If your using the canvas then chances are that your going to be redrawing it every frame anywayz, so you need to reprint your text every frame anywayz. I guess you'd just have an object that stores what text/where/how and every frame you just draw what ever is there. Then you can just change what ever is there. Overlaying it with divs might seem like a good idea, but (without any tests) Id say its a bad idea. You might make it easier for you to do updates or whatever, but Id be surprised if it was the most efficient way of doing it. Itll prolly cause repaints and what not (you could avoid most of that tho if you do all of your updates in a requestFrame) and from what Ive seen canvas works best when its the only thing on the page. OH, and third party packages are written in pure JS aswell
  16. if (this.cursors.left.isDown){ this.player.body.velocity.x = -100; this.player.animations.play('left'); }else if(this.cursors.right.isDown){ this.player.body.velocity.x = 100; this.player.animations.play('right'); }else if(this.cursors.up.isDown && this.cursors.left.isDown){ this.player.animations.play('cast-large-right'); }else if(this.key_c.isDown){ this.player.animations.play('cast-large-left'); }else{ this.player.animations.stop(); this.player.frame = 78; } With that code if the left key is down the rest doesnt get checked including..... }else if(this.cursors.up.isDown && this.cursors.left.isDown){ ...and..... }else if(this.key_c.isDown){ ...."else" is your problem EDIT : I think you want something like this..... if (this.cursors.left.isDown) { this.player.body.velocity.x = -100; this.player.animations.play('left'); } else if (this.cursors.right.isDown) { this.player.body.velocity.x = 100; this.player.animations.play('right'); } else { this.player.animations.stop(); this.player.frame = 78; } if (this.key_c.isDown) { if (this.cursors.right.isDown) this.player.animations.play('cast-large-right'); else if (this.cursors.left.isDown) this.player.animations.play('cast-large-left'); // else shoot in the direction their facing }
  17. Im not going to answer this but just wanted to say.... Your getting into the realms of "code this for me"....I hate that crap. If you want people to try and "fix" your code, not "write" it, then show us some code!!!! Create a simple example in JsBin or CodeIo of woteva and then people like me would be perfectly happy to fix it. @XekeDeath : Love the sig Got a mate who created a career as a coder using that advice....being an Aussie I wonder if he taught you
  18. PAEz

    Texture size. npow or pow?

    I dont really know CreateJS so I gotta ask, wheres textures in CreateJS? I had a quick look and saw no mention of textures anywhere, if you mean bitmap or spritesheet you should say so. Maybe you should ask at their place... http://community.createjs.com/discussions/easeljs
  19. PAEz

    Texture size. npow or pow?

    I wouldnt have a clue, but maybe you should state what for?....webgl, phaser, pixi, woteva....I know that webgl textures have to be unless you set something or other (I really dont know).
  20. @David : Hey, thats cool....another thing I hadnt seen lately. Just out of interest I put that through jsperf..... http://jsperf.com/math-floor-vs-math-round-vs-parseint/126 ....dont ya just hate results like that? Nice to see IE still sucks.....really? a function call is faster than a bitwise operation?.....ok.....
  21. @Vaughan Sometimes its just a case of not making it too easy. Once it becomes general knowledge that games store things in local storage and all the kid needs to do is go to the web inspector and have a look, it all gets too easy. So even if its really weak as hell at least its going to take looking in the code to cheat and not just local storage. For instance, which one of these is easier to cheat with?..... {lives:3} ....or... ÅÌ And thats using one of the oldest, weakest methods there is ...... function dyslexia(string){return String.fromCharCode.apply(this,string.split('').map(function(a){return a.charCodeAt()^255;}))} var a = "{lives:3}"; var z = dyslexia(a); a == dyslexia(z); PS. I dont think that function would work right with unicode stuff (couldnt be bothered checking), if thats the case just btoa it first and in your ascii land.
  22. I know this is old but it really bugs me that no one gave you any advice at all. So even though Im really not the one to answer this, heres my 2c worth.... For drawing HTML has the lovely canvas which can do what you want. But, if you want more control and options you should look at something like paper.js or fabric.js. Either of these libraries will make it easier to draw and update, plus give you alot more options for the future, like interactivity (allow the user to put the mouse over a circle and get stats or woteva). Your in JS land now, you should be looking at JSON. Both the methods you mention are going to have to be converted to an object/array at some time anyways, so may as well start with that. So itll look something like... [{ "name": "circle-1", "radiusWhenBorn": 5, "radiusWhenMiddle": 100, "radiusWhenDead": 0, "colorYouth": "green", "colorMiddle": "blue", "colorOld": "red", "birthdate": "2014-05-10", "deathdate": "2014-06-10",}, { "name": "circle-2", "radiusWhenBorn": 3, "radiusWhenMiddle": 200, "radiusWhenDead": 0, "colorYouth": "green", "colorMiddle": "blue", "colorOld": "red", "birthdate": "2014-04-10", "deathdate": "2014-06-10",}, { "name": "circle-3", "radiusWhenBorn": 50, "radiusWhenMiddle": 100, "radiusWhenDead": 0, "colorYouth": "green", "colorMiddle": "blue", "colorOld": "red", "birthdate": "2014-05-10", "deathdate": "2014-06-10",}]Then in your code you can do.... var circles = JSON.parse("theabove");...and circles will be a nice array of circle objects. Then later you can stringify (google JSON and then read the MDN link) circles and save it somewhere (look up localStorage for simple stuff and then look at db's). Although for colours you might want to use an array of rgb or hsl values as your going to need them later to interlope between. But if you want to use words theres heaps of colour libraries out there and paper or fabric are most likely to have them. Timing and animation These days you should be looking at requestAnimationFrame for when to update the animation. Date.parse() can convert your dates to milliseconds... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse ...well Im not completely sure about your format, but that page will tell ya. Date.now() will get the current milliseconds. You'll then have something like a start date for the virtual time and a real start date for now. Then on each requestFrame you record the amount of time since the last frame and convert it to your virtual time system. Itd be easy if you just say something like in virtual time 1 real time unit (milllisecond) equals (I dont know) 1000 milliseconds of virtual time (one second) and adjust accordingly. Then you just figure out where you are in your virtual time, which circles are still alive and what point they are in their life and then lerp the values accordingly. Ohwell, sorry for the late reply, but just incase, hope that helps you get an idea of what to look for.
  23. Its a small thing, but.... for(var i = 0; i < (this.filter().particles || 1); i++) {...will call filter and create an object on every particle created due to the conditional. The conditional is executed every loop. Where as, this..... for (var i = 0,end=this.filter().particles||1; i < end; i++)...will only do it once no matter how many particles it makes.
  24. Have a look at this code. Filter.... { x: Math.random() * 20, particles: 10}Your code.... var filter = this.filter();filter.x = (filter.x + this.x) || this.x;filter.y = (filter.y + this.y) || this.y;filter.maxParticles = filter.maxParticles || 0;if(filter.maxParticles === 0 || filter.maxParticles > this.particles.length) { if(createNewParticles !== false) { for(var i = 0; i < (filter.particles || 1); i++) this.particles.push(new Particle(filter)); }}...all the particles created at that moment will have exactly the same x. My code.... for (var i = 0,end=this.filter().particles||1; i < end; i++){ var filter = this.filter(); filter["x"] = (filter.x + this.x) || this.x; filter["y"] = (filter.y + this.y) || this.y; this.particles.push(new Particle(filter));}...all the particles will have different x values. PS. Thanks for showing me... i < (filter.particles || 1);I hadnt seen that before .....Id prefer to declare it with end, but I like that
  25. Love to see stuff like this in simple form. One thing though, using eval in a particle system is nuts!! Heres why..... http://jsperf.com/evaleval ...and here it is using functions.... http://jsbin.com/poseq/2/edit ...if theres something in that tutorial that lead you to do this then Im sorry, I definately could be wrong, but I couldnt look at the tut as I dont have enough data limit left for the month. Also while Im here, the way your creating new particles is a little off in that if you have set it to make ten particles and if the filter has a random x or woteva then all 10 particles will have the same x and woteva as the first one created and I wouldn't have thought thats what you'd want.... http://jsbin.com/poseq/3/edit