PAEz

Members
  • Content Count

    55
  • Joined

  • Last visited

  • Days Won

    1

PAEz last won the day on May 25 2014

PAEz had the most liked content!

About PAEz

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    Australia

Contact Methods

  • Twitter
    @PAEz_

Recent Profile Visitors

743 profile views
  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