pixelfingers
pixelfingers
  • 142
  • 25 376
Drawing Tile Maps
This evening I added a tile drawing routine that takes a viewport rectangle and an origin position within the world coordinate space. I've also renamed some functions. The map function works out the offset and number of tiles to draw in the space available (plus an extra couple of strips for partial tiles.)
I've just picked some random tiles from a sprite sheet, it would be nice to have a proper map editor and tile editor (ideally it would also be nice if they were also written in JS so that they were portable.) I would need to add some kind of pointer/tap support to the standard library functions and host app.
Maybe the native app could write the touch screen coordinates into a couple of memory locations for touch x and y and a touch down state?
Переглядів: 18

Відео

Cartridge Snapshot Explorer
Переглядів 197 годин тому
A small update to the cartridge snapshot explorer after a bit of refactoring to the PNG cartridge writer.
Saving Cartridges
Переглядів 287 годин тому
I got file I/O working, I wrote a PNG writer class that writes the pixel RGBA data and custom code, libs, and tile chunks to disk, and code to load it back.
Mult-tile function.
Переглядів 1012 годин тому
I've added a multi-tile function that draws more than one tile, you pass the rows and cols and an optional stride.
A bug showing how the VRAM and TILE memory works 🐞🔍💭
Переглядів 44714 годин тому
This is actually an interesting extra little video where I'd caused a bug, the display size had changed but I'd not correctly resized the VRAM and offset the TILE address, so the code was rendering the VRAM and part of the TILE memory. You can see how the tile rows are stored in strips in TILE memory, and you can also see the bit of rainbow code updating one of the tiles before the tile is draw...
Body Popping
Переглядів 5514 годин тому
I've tweaked the UI and removed the padding and background to make it a bit easier to use the virtual console on a real device in landscape (something you'd actually want to use anyway.) I still miss physical buttons, I'm contemplating using haptics when a button changes state. I've increased the screen size as well to Gameboy width dimensions, 160 pixels from 120 pixels.
Clipping Rectangles and Sinewaves! 🌊🌈🟦
Переглядів 6916 годин тому
This evening I improved my faster tile drawing routine so that it supported clipping so was able to remove the slowest routine variant. The routines now take optional clipping rectangle arguments, I'll be able to use this to do tile map drawing next 😃 I'm also super happy that I got a sine wave routine working, I'm going to add this to the standard library set of routines with some parameters y...
Rainbow Tiles 🌈
Переглядів 4219 годин тому
I've added the ability to read and draw pixels into tile memory locations so that you can do effects when drawing tiles. I've also got different variants of drawing routines that have different performance depending on what flags are set - there are flags for screen clipping, screen wrapping and alpha transparency. The most performant has no flags and makes 8 calls to draw, the slower routines ...
Drawing tiles and fonts
Переглядів 5719 годин тому
This demo shows fonts being drawn using tile drawing routines to copy values from the tile memory region into the video memory region. There's some optimisation I can do with the tile drawing if ignoring transparency.
Supporting Landscape Orientation
Переглядів 3221 годину тому
I did a bit of refactoring and added landscape orientation support to the virtual console, the code checks the aspect ratio is greater than 4:3 and changes into a landscape layout. The button sizes also vary slightly on smaller devices in order to give the display a bit more space. I've been writing a specification and architecture decision record on the cartridge format, compression and memory...
Embedding code in PNG images
Переглядів 95День тому
I've been inspired by the P8 png format to come up with a "cartridge" file format to hold code and other data like fonts, but instead of using the P8 technique of stenography, I've made use of the PNG chunk format to store two custom chunks, a "code" chunk and a "font" chunk (empty at the moment.) The PNG format allows you to have what it calls ancillary private chunks (dictated by the lowercas...
Rainbow Pixels 🌈🦄👾🕹️
Переглядів 3914 днів тому
I spent some time fiddling about with texture coordinates and resizing the pixel buffer to 120 x 120 pixels, and the memory to 64kb. Copying pixels into a texture isn't the most optimal and I've found it can be a bit slow when drawing a whole screen of pixels, although it might be okay for games that don't update that quickly. If I was going for an alternative API I think I'd do something like ...
Better Virtual Gamepad with SwiftUI Canvas
Переглядів 2914 днів тому
I redid the virtual gamepad using a Swift UI Canvas to draw the buttons; this also lets the user press more than one button at a time in a group. I've added the ability to give decal images colours, and a new light button style (along with the original dark button style.) I also added a slider to change the hue of the fake button housing, just for fun, although I prefer the yellow.
Reading Virtual Gamepad State
Переглядів 2514 днів тому
I made a virtual gamepad in Swift UI using gesture recognisers for touch state and then bridged the state through as a bit field at a particular address in memory. The script then reads the value and sets a different pixel colour for each of the buttons. There's a helper function for setting the pixel colour.
Thanks for the Memory 💭
Переглядів 5421 день тому
I’ve tided up the code to make it work with view models, polished up the UI and exposed memory to the script. The pixels are drawn into a VRAM segment. I intend to have virtual keys that will write values into other parts of the mapped memory, just like how real hardware works.
Textastic Editing
Переглядів 3221 день тому
Textastic Editing
Editing and Hot Loading 🔥💾
Переглядів 2021 день тому
Editing and Hot Loading 🔥💾
Quartet Pounder
Переглядів 186 місяців тому
Quartet Pounder
Anbernic RG Cube Web Demo
Переглядів 2136 місяців тому
Anbernic RG Cube Web Demo
Pew! Pew! Pew!
Переглядів 278 місяців тому
Pew! Pew! Pew!
The Joy of Pads
Переглядів 128 місяців тому
The Joy of Pads
Smooth Moves
Переглядів 168 місяців тому
Smooth Moves
Random Roaming
Переглядів 468 місяців тому
Random Roaming
Amazing Procedural Generation
Переглядів 448 місяців тому
Amazing Procedural Generation
Twisty Little Passages
Переглядів 6928 місяців тому
Twisty Little Passages
In the Zone
Переглядів 818 місяців тому
In the Zone
Roguelike Room Connectors
Переглядів 1958 місяців тому
Roguelike Room Connectors
Small Beginnings
Переглядів 349 місяців тому
Small Beginnings
One foot in the future
Переглядів 2111 місяців тому
One foot in the future
One foot in the hot chocolate
Переглядів 8111 місяців тому
One foot in the hot chocolate

КОМЕНТАРІ

  • @pixelfingers
    @pixelfingers 17 днів тому

    It doesn’t show on the video, but 0.01 flips between the two states very quickly on device.

  • @ideias.pescaenatureza3889
    @ideias.pescaenatureza3889 9 місяців тому

    Esse aparelho alcança quantos metros

  • @anthony_201
    @anthony_201 Рік тому

    Do you know what that blinking red light is? The same thing happens to me and do you know how to configure IR SEND or why use the function? You gained 1 subscriber 😃

  • @ScrqpYT
    @ScrqpYT Рік тому

    I just got one

  • @awesomethings6124
    @awesomethings6124 Рік тому

    what is it?

  • @Samir2005s
    @Samir2005s Рік тому

    oreeee baaapreee

  • @theshortschannel7411
    @theshortschannel7411 Рік тому

    How did you do the color test

    • @NewIce3
      @NewIce3 6 місяців тому

      "necroposting" :) Just press once the power button on the device and it will run the test

  • @SimulationStarterKit
    @SimulationStarterKit Рік тому

    Remind me not to climb into a racing car with you :-) Actually you were doing great until you landed upside down on your head at the end. I never played it in the day. The physics and drift look good and it runs well.

  • @Wimachtendink
    @Wimachtendink 2 роки тому

    I'm experiencing a dorky level of excitement for mine which just shipped. Thanks for sharing :)

  • @MistereXMachina
    @MistereXMachina 2 роки тому

    Fire bro, can't wait to see where it goes

  • @josephhanger6380
    @josephhanger6380 2 роки тому

    Looks very cool. Im trying to make a 3D render in c++ right now and it’s no good.

    • @pixelfingers
      @pixelfingers 2 роки тому

      Thank you! That’s very kind 👍 If you’re looking for a good video tutorial course and some source code that builds up a 3D engine from scratch using pixel arrays with C and SDL, Pikuma has a very good one - pikuma.com/courses/learn-3d-computer-graphics-programming - I’ve not finished it yet but he goes through the concepts from the ground up. It’s a paid for course I’m afraid, but he’s a very good teacher and has some other interesting courses. I have done a little bit of 3D in the past with OpenGLES (and M3G on the old J2ME phones) and using a library like that, which handles a lot of the complexity for you like texturing and culling/clipping makes things easier. If I was doing this as a commercial thing and not a small fun side project I think I’d be using WebGL or an engine. Part of my reasoning for doing it from scratch (in JS) with arrays of pixel buffers is a personal one really - having done little demos in the past for devices that no longer exist and tools that no longer run made me think it’d be good to do something that might last a bit longer. C and C++ is a good choice though, hope you’re able to work things out!

    • @pixelfingers
      @pixelfingers 2 роки тому

      I’ve just remembered I have an old work friend who has written his own C++ 3D engine if you’re interested, he has a UA-cam channel youtube.com/@MrBensanmorris and his engine fireflytech.org - just in case it’s of any interest or use! 👍

  • @7lstudios160
    @7lstudios160 2 роки тому

    web dev moment :0

  • @TheKluxi1
    @TheKluxi1 2 роки тому

    are you using a potato to run this game?

    • @brownbeltninja7237
      @brownbeltninja7237 2 роки тому

      i'd say its an unoptimised raytracer

    • @pixelfingers
      @pixelfingers 2 роки тому

      @@brownbeltninja7237 it’s not as clever as that I’m afraid, but yes it’s unoptimised 🙂 It’s just generating some projected x,y points in a grid and going into the screen on the z axis with a fake perspective effect using scaling factors for the z, to get horizontal scaled strips of squares, then makes sure they’re centred, creates faces that refer to the points, then blocks that refer to faces, works out the draw order for faces and for blocks and then I’ve made a horizontal quad pixel drawing function that samples a texture to draw the faces in the correct back to front order (I’m not using a depth buffer.) It’s using RGBA pixel buffers and then rendering the buffer to a canvas. I’m just doing it this way for a bit of fun and for my own learning over a few evenings. I’m aiming to recreate something like the first person games from the 1980’s and 90’s (games like Dungeon Master, Captive, Knightmare.) If I was doing this to make a proper game I’d be using something a bit more optimised like WebGL which handles all the projection, culling and z-buffering etc for you 🙂 (and probably a dedicated engine.) Although I hope to get a little game working at some point. thanks! 🙂✌️

    • @brownbeltninja7237
      @brownbeltninja7237 2 роки тому

      @@pixelfingers That make's sense, thanks for sharing your method!

  • @BinkiklouGaminglol
    @BinkiklouGaminglol 2 роки тому

    What is random about it

    • @pixelfingers
      @pixelfingers 2 роки тому

      The block placement and textures being chosen, but it’s just to test it’s working. I’ll be making it work from a top down map soon with blocks with sides.

    • @BinkiklouGaminglol
      @BinkiklouGaminglol 2 роки тому

      @@pixelfingers oh, is it completely random or somewhat procedural

    • @pixelfingers
      @pixelfingers 2 роки тому

      @@BinkiklouGaminglol just random at the moment but when I’ve got it rendering from a 2D map (which I’ve worked out and have started looking at today) I can get it to generate a maze or level in 2D 🙂 thank you!

  • @diejuse
    @diejuse 2 роки тому

    Niceee. I I received my BangleJS2 today!

  • @willshatter38u75
    @willshatter38u75 2 роки тому

    Code?

    • @pixelfingers
      @pixelfingers 7 місяців тому

      Yes, it’s written in code

  • @quohime1824
    @quohime1824 5 років тому

    This is cool stuff, could you do more videos on it?

  • @Archive-t5u
    @Archive-t5u 7 років тому

    Hi! I'm from VietNam, I am a student and I really need this for my project, so can you give me source code!? This is my address: fotos.fernweh@gmail.com ,Thank you so much!

  • @pickle6529
    @pickle6529 7 років тому

    Very cool!

  • @ДмитрийШевелев-ь3щ

    you could make great lessons ! amazing

  • @ДмитрийШевелев-ь3щ

    Super !! Please told me how it's made It's objective c ?

  • @fatsquirrel9376
    @fatsquirrel9376 9 років тому

    It'd be cool to have ppe on NES emulators.

  • @MrRobertWiltshire
    @MrRobertWiltshire 9 років тому

    May the ports be with you. Always.

  • @pixelfingers
    @pixelfingers 9 років тому

    I've started another version in Swift using some of the updated Apple SpriteKit API in iOS 8 and 9: ua-cam.com/video/7Qahj3EOJWA/v-deo.html

  • @lufasumafalu5069
    @lufasumafalu5069 9 років тому

    truly a disgrace , only 1 thumb up... if i can give you more i will give more thumb for this video and the source code link you shared... thanks

  • @TheMorfeus2
    @TheMorfeus2 9 років тому

    tutorial/links to one maybe? i'm looking for such effect in my own game

    • @fatsquirrel9376
      @fatsquirrel9376 9 років тому

      +TheMorfeus2 late i know there are probably libraries for this EDIT: goo.gl/3M5XUP

    • @TheMorfeus2
      @TheMorfeus2 9 років тому

      Already found it ;)

    • @fatsquirrel9376
      @fatsquirrel9376 9 років тому

      +TheMorfeus2 oh great :D

  • @pixelfingers
    @pixelfingers 10 років тому

    I've started looking at adding cameras to the world node.

  • @lufasumafalu5069
    @lufasumafalu5069 10 років тому

    thx for the video and code sharing.. btw what do you think about Sparrow iOS framework and cocos2d iOS ? how do they compare to SpriteKit in term of ease of use , flexibility and performance ? i am currently using Sparrow as its an elegant and easy framework but limited in features. currently looking at SpriteKit as replacement framework..

    • @pixelfingers
      @pixelfingers 10 років тому

      I've not really used Sparrow or Cocos2d so I can't really comment much - I did take a brief look at the API documentation for both, and they look like they have a lot more classes, although they all seem to share the same idea with everything structured in a tree as a scene graph: 1. doc.sparrow-framework.org/v2/ (Sparrow) 2. www.cocos2d-iphone.org/docs/api/index.html (Cocos2d) 3. bit.ly/1nhxp6S (SpriteKit) I guess underneath they're all doing the same thing and making calls to OpenGLES, so I would have thought performance would be roughly the same between all three. It looks like you already get a lot out of the box with both Sparrow and Cocos2d, and it looks like there's a lot more tutorials. The downside (or upside) with SpriteKit is that it looks like it doesn't come with audio support, so you'd have to start using the iOS audio APIs, or another library, e.g. ObjectAL (which I think runs on iOS and Mac.) SpriteKit is an interesting one if you're thinking of doing desktop games, because OS X Mavericks also has the SpriteKit framework, although you'd probably need to include your sources in a new project (or perhaps create a library) with the desktop APIs, e.g. NSApplicationDelegate/NSViewController etc. I've been playing about with GLKit on iOS as well, and have already done some other videos with 3D sprites using OpenGLES calls to create my own sprite batches; and I know Apple also have SceneKit on the desktop - from reading this MacWorld article: bit.ly/1jxQwXf It looks like Apple are certainly thinking about games, with these graphics and other APIs (e.g. Games Controller API.) One good thing about using the Apple APIs is that they might decide one day to release a console based on AppleTV or iOS!

  • @viveleroi
    @viveleroi 10 років тому

    Can you share info on how you did this? Porting a java game to iOS and info on proper sprite batch rendering is hard to come by

    • @pixelfingers
      @pixelfingers 10 років тому

      I've made the source code repository available: bitbucket.org/pixeltopia/spritely

  • @lufasumafalu5069
    @lufasumafalu5069 10 років тому

    how do you make each box respond to touch ? how do you make a node touchable ?

    • @pixelfingers
      @pixelfingers 10 років тому

      you can use SKScene method touchesMoved:withEvent: and UITouch method locationInNode: there's some examples here: bit.ly/1lpkCww

    • @pixelfingers
      @pixelfingers 10 років тому

      I've updated the source code on bitbucket to show you how you might get the boxes to respond to touches, and have uploaded a video example: Sprite Kit Tiling, Panning and Tapping

    • @pixelfingers
      @pixelfingers 10 років тому

      I've updated source code with camera movement and tracking nodes: Sprite Kit Camera Movement

  • @FengXingFengXing
    @FengXingFengXing 12 років тому

    Yu use what file format for export model?

  • @clivejefferies
    @clivejefferies 12 років тому

    Cool